ESLint not working in VS Code?
Solution 1
There are a few reasons that ESLint may not be giving you feedback. ESLint is going to look for your configuration file first in your project and if it can't find a .eslintrc.json there it will look for a global configuration. Personally, I only install ESLint in each project and create a configuration based off of each project.
The second reason why you aren't getting feedback is that to get the feedback you have to define your linting rules in the .eslintrc.json. If there are no rules there, or you have no plugins installed then you have to define them.
Solution 2
If ESLint is running in the terminal but not inside VSCode, it is probably
because the extension is unable to detect both the local and the global
node_modules
folders.
To verify, press Ctrl+Shift+U in VSCode to open
the Output
panel after opening a JavaScript file with a known eslint
issue.
If it shows Failed to load the ESLint library for the document {documentName}.js
-or- if the Problems
tab shows an error or a warning that
refers to eslint
, then VSCode is having a problem trying to detect the path.
If yes, then set it manually by configuring the eslint.nodePath
in the VSCode
settings (settings.json
). Give it the full path (for example, like
"eslint.nodePath": "C:\\Program Files\\nodejs"
) -- using environment variables
is currently not supported.
This option has been documented at the ESLint extension page.
Solution 3
In my case, since I was using TypeScript with React, the fix was simply to tell ESLint to also validate these files. This needs to go in your user settings:
"eslint.validate": [ "javascript", "javascriptreact", "html", "typescriptreact" ],
Solution 4
configuring working directories solved it for me, since I had multiple projects with own .eslintrc
files openend in the same window.
Put this in your .vscode/settings.json
"eslint.workingDirectories": [
"./backend",
"./frontend"
],
thanks to this guy on github: https://github.com/microsoft/vscode-eslint/issues/696#issuecomment-542592372
PS: useful command to list all subdirectories containing an .eslintrc
except /node_modules:
find . .eslintrc | grep .eslintrc | grep -v node_modules
Solution 5
Case 1/2: First-time plugin installation? approval is necessary
Little "weird" user experience (Hard to notice) - anyway - Since V 2.1.10 -
You must change the "currently block" status bar on New/First installation.
ESLint plugin Version 2.1.10
changelog (08/10/2020)
no modal dialog is shown when the ESLint extension tries to load an ESLint library for the first time and an approval is necessary. Instead the ESLint status bar item changes to ESLint status icon indicating that the execution is currently block.
Click on the status-bar
(Right-Bottom corner):
Opens this popup:
Approve ==> Allows Everywhere
-or- by commands:
ctrl + Shift + p -- ESLint: Manage Library Execution
Read more here under "Release Notes":
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
Case 2/2: The plugin already installed/approve
Open the terminal Ctrl+`
Under output ESLint
dropdown, you find useful debugging data (Errors, warnings, info).
For example, missing .eslintrc-.json
throw this error:
Error: ENOENT: no such file or directory, realpath
Next, check if the plugin enabled:
By deafult there is no need to edit eslint.probe
Last, Since v 2.0.4 - eslint.validate
in "normal cases" (react, vue, typescript, js, html, md) not necessary anymore (old legacy setting)**
**Many out-of-date stackoverflow answers (even her) indicate that eslint.probe
file should be edited.
eslint.probe
= an array for language identifiers for which the ESLint extension should be activated and should try to validate the file. If validation fails for probed languages the extension says silent. Defaults to [javascript
,javascriptreact
,typescript
,typescriptreact
,html
,vue
,markdown
].
Related videos on Youtube
John Landon
Updated on April 10, 2022Comments
-
John Landon about 2 years
ESLint is not working for me in VS Code. I have the plugin installed in VS Code, and ESLint itself as a developer dependency in my package.json, which I have installed as well.
I modified the following option in the VS Code User Settings:
{ "eslint.options": { "configFile": "C:/mypath" } }
I have use the command
eslint --init
to add the basic.eslintrc.json
to the main directory of my package.Other people were able to get ESLint feedback from VS Code using the exact same package with the exact same ESLint config file.
I have received no feedback of any kind when directly breaking multiple rules that were all included in the recommended rule set that is by default inside of the
.eslintrc.json
file.What am I missing?
Edit: I have tested using ESLint via command line, and everything worked as expected, with the errors found where they should have, however, these same errors never showed up in VS Code. The issue seems to be on VS Code's side and not ESLint.
-
Admin about 4 yearsNote that, If you have installed ESLint successfully, but got no feedback from ESLint as you expected, then there's a chance that you might have forgotten to initialize ESLint. To do that, run this command from the root of your project
./node_modules/.bin/eslint --init
-
-
EJ Mason almost 7 yearsIf you have a local .eslintrc.json you do not need to define your configFile in your settings.
-
John Landon almost 7 yearsI have the local
.eslintrc.json
already placed in the main folder of my project, and my rules extends the recommended rules by ESLint, which are the ones I was testing. I have also added some rules of my own to further test, but with no success. -
John Landon almost 7 yearsWhen using ESLint directly via command line, everything works properly, and it finds all errors. The issue here seems to be with VS Code, and not ESLint.
-
EJ Mason almost 7 yearstry enabling eslint in your settings "eslint.enable": true. Make sure you don't have any eslint installed globally. and try to remove the configFile path. That is how I have my vscode set up. I run into a lot of problems when I have eslint globally and locally installed.
-
John Landon almost 7 yearsI already have it set to true, and I just tried uninstalling it globally, to only have it locally and I have removed the path option with no success.
-
EJ Mason almost 7 yearsOpen up your output at the bottom of the screen. Change it to eslint up near the top right of the output window. Now what does it say in that window?
-
Andrei Voicu almost 6 yearsthank you, spent a few hours figuring out why eslint did now work globally with vscode
-
Jared Knipp over 5 yearsUgh! I don't know why this didn't occur to me sooner. VSCode would not recognize module aliases defined in my Webpack config file and was displaying Eslint errors but running Eslint from the command line did not. Restarting VScode fixed the problem!
-
Roman over 5 yearsI noticed that sometimes it takes a couple of minutes to activate the changes or even you need to restart vscode before something takes effect. For sure, you need to restart the program each time to see if new setting works or not
-
atulkhatri about 5 yearsFor me, the issue was that I had not installed ESLint extension in VSCode.
-
Ellis over 4 yearsWorked for me. (On Windows)
-
oyalhi over 4 yearsFor me, in addition to what you've specified, I had to add
"javascriptreact"
and"typescriptreact"
since my project uses React. -
dmudro over 4 yearsGreat point.
javascript
andjavascriptreact
are default values but I think you would need to have*scriptreact
added back for JSX files. -
ggat over 4 yearsTypeScript with React here, worked for me too. Thanks
-
Peter Boomsma over 3 yearsTypeScript with React on Windows and this worked for me as well.
-
Nick Grealy over 3 yearsI needed to create an
eslintrc.js
in the ROOT of my project (*i.e. not subfolders). -
bshek over 3 yearsI had the same issue. This helped me to resolve it but I didn't need to change the settings.json file. I went into the
Problems
tab and clicked on the light bulb beside the error and on the pop-up window selected allow. -
the_haystacker about 3 yearsAdding configuration to .prettierrc solved my issue. The problem was not with the eslintrc.json file.
-
Chaos Crafter about 3 yearsI think this one needs to be pinned - that Allow action was so non-obvious. This fixed it all for me.
-
Sakura Kinomoto almost 3 yearsIf you have the same problem, doesn't give an answer for telling it. It's better to upvote the question and/or give a comment for put some additional data.
-
alfreema over 2 yearsIt's working for us on multiple computers and environments (Windows, Ubuntu WSL 1, Ubuntu WSL 2), and none of those need to be checked. We don't have a "Eslint: Enable" option.
-
alfreema over 2 yearsNOTE: On Windows 10, .vscode/settings.json in the root of our project were not taking effect, but they WERE for our Ubuntu WSL environments. On Windows 10, the default settings.json was under our %appdata% folder, and when we modified it to have the "editor.codeActionsOnSave ...." lines, it started working. The easiest way to get to the right settings.json is to go to the ESLint plugin settings and scroll to the bottom to find a link to it. So again, on Windows 10 only, it was ignoring the settings.json in our .vscode folder in the root of our project.
-
Jami about 2 yearsMy problem was that I install eslint per-project (not globally) and I was using Docker, so I forgot to run
npm i
on my local machine. -
Clonkex almost 2 yearsWhat do you mean by "user settings"? Is this
.eslintrc.json
or something else? -
Simone almost 2 yearsThis is your
settings.json
file. You can open this file via the command palette, on macOS it'sCmd + Shift + P
to open it, then search forPreferences: Open Settings (JSON)