ESLint 美元（$）未定义。 （无非定义）

Posted 2023-03-27

【中文标题】ESLint 美元（$）未定义。 （无非定义）

【英文标题】：ESLint dollar($) is not defined. (no-undef)

【发布时间】：2017-01-23 10:59:21

【问题描述】：

$("#ID").hide();

我将 ESLint 添加到我的项目中。

一切都很好，除了符号$。

我收到错误：[eslint] '$' is not defined. (no-undef)

我的.eslintrc.json（注意：当有等效的 javascript 函数时，additional rules 设置为禁止 jquery 函数）：

"env": 
    "browser": true,
    "commonjs": true,
    "es6": true
,
"extends": [
    "eslint:recommended"
],
"parserOptions": 
    "sourceType": "module"
,
"plugins": [
    "dollar-sign",
    "jquery"
],
"rules":        
    "indent": [
        "error" ,
        "tab"
    ],
    "linebreak-style": [
        "error",
        "windows"
    ],
    "quotes": [
        "error",
        "double"
    ],
    "semi": [
        "error",
        "always"
    ],
    "jquery/no-ajax": 2,
    "jquery/no-animate": 2,
    "jquery/no-attr": 2,
    "jquery/no-bind": 2,
    "jquery/no-class": 2,
    "jquery/no-clone": 2,
    "jquery/no-closest": 2,
    "jquery/no-css": 2,
    "jquery/no-data": 2,
    "jquery/no-deferred": 2,
    "jquery/no-delegate": 2,
    "jquery/no-each": 2,
    "jquery/no-fade": 2,
    "jquery/no-filter": 2,
    "jquery/no-find": 2,
    "jquery/no-global-eval": 2,
    "jquery/no-has": 2,
    "jquery/no-hide": 2,
    "jquery/no-html": 2,
    "jquery/no-in-array": 2,
    "jquery/no-is": 2,
    "jquery/no-map": 2,
    "jquery/no-merge": 2,
    "jquery/no-param": 2,
    "jquery/no-parent": 2,
    "jquery/no-parents": 2,
    "jquery/no-parse-html": 2,
    "jquery/no-prop": 2,
    "jquery/no-proxy": 2,
    "jquery/no-serialize": 2,
    "jquery/no-show": 2,
    "jquery/no-sizzle": 2,
    "jquery/no-slide": 2,
    "jquery/no-text": 2,
    "jquery/no-toggle": 2,
    "jquery/no-trigger": 2,
    "jquery/no-trim": 2,
    "jquery/no-val": 2,
    "jquery/no-wrap": 2,
    "dollar-sign/dollar-sign": [
        2,
        "ignoreProperties"
    ]

你可以看到我添加了两个插件：eslint-plugin-dollar-sign 和 eslint-plugin-jquery。

为什么这条规则不起作用？

"dollar-sign/dollar-sign": [ 2, "ignoreProperties" ]

【参考方案1】：

你不见了

"env": 
  "browser": true,
  "commonjs": true,
  "es6": true,
  "jquery": true
,

$ 在未启用 jquery 环境的情况下未声明为全局变量。因此，您会收到 no-undef 错误，表示您正在使用尚未声明的变量。

【参考方案2】：

https://eslint.org/docs/user-guide/configuring#specifying-environments

您可以使用 JavaScript 文件中的注释指定环境，使用以下格式：

在您的 JavaScript 文件开头添加以下行作为注释。

    /* eslint-env jquery */

eslinter 将停止在 '$' 上抛出 undefined，因为它会知道您正在使用 jQuery。

【讨论】：

非常感谢。这使我免于更改配置文件。

谢谢！这比/* global $ */

的意图要清晰得多

【参考方案3】：

你也可以将这一行添加到你的 js 文件的顶部：

/* global $ */

为了防止对“$”或任何其他全局变量（如“varName”）发出警告：

/* global varName */

【讨论】：

完美地为伞形js添加“u”:)（我想用谷歌搜索“$”的问题，因为它可能更常见）

【参考方案4】：

在.eslintrc.js

添加

  "globals": 
    "$": true
  

见https://eslint.org/docs/user-guide/configuring#specifying-globals

【讨论】：

这对其他库有好处，在我的例子中是 THREEjs。我通过添加 "globals": "THREE": true , 修复了 eslint 的抱怨，谢谢！

整天都在寻找这个寻找 webpack 全局变量的解决方案，这正是我所需要的。谢谢你！

【参考方案5】：

“环境”： …… “jquery”：是的 ,

真的很有帮助。