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

i add ESLint to my project .

everything is fine, except symbol $.

i get error: [eslint] '$' is not defined. (no-undef)

my .eslintrc.json (note: it has additional rules set to disallow jquery functions when there's an equivalent javascript one):

{
"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"
    ]
}

you can see that I have added two plugins: eslint-plugin-dollar-sign and eslint-plugin-jquery.

why does not work this rule ?

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

joeljpa
  • 317
  • 2
  • 13
spbsmile
  • 1,555
  • 2
  • 10
  • 9

5 Answers5

273

You are missing

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

$ is not declared as a global without jquery environment enabled. Because of that, you are getting a no-undef error, saying that you are using variable that haven't been declared.

Ilya Volodin
  • 10,929
  • 2
  • 45
  • 48
56

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

You can specify environments using a comment inside of your JavaScript file, use the following format:

Add the line below as a comment at the beginning of your JavaScript file.

    /* eslint-env jquery */

The eslinter will stop throwing undefined on '$' because it will know you are working with jQuery.

Noah Sussman
  • 4,576
  • 2
  • 28
  • 25
Frank Genova
  • 660
  • 5
  • 5
34

You can also add this line to the top of your js file:

/* global $ */

To prevent warning over "$", or for any other global like "varName":

/* global varName */
ariel
  • 15,620
  • 12
  • 61
  • 73
  • Worked perfectly adding "u" for umbrellajs : ) (figured i'd google the problem with "$" as it's probably more common) – Justin Jul 01 '21 at 04:12
26

In .eslintrc.js

Add

{
  "globals": {
    "$": true
  }
}

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

Honghao Z
  • 1,419
  • 22
  • 29
  • 1
    this is good for other libraries, in my case THREEjs. I fixed the eslint complaining by adding `"globals": { "THREE": true },` thanks! – danivicario Nov 01 '19 at 09:13
  • 1
    Been searching all day for this solution looking for webpack globals, this is just wbhat I needed. Thanky you! – lharby Feb 20 '20 at 15:24
1

"env": { .... "jquery": true },

is really help.

Boy.Lee
  • 85
  • 3