VSCode is an excellent source code editor, ESLint is the best linter for Javascript. They are great when they work together, but when they don’t, you will find ourself pulling your hair out just to figure out how to get them back together.
This article is a checklist of what you can do if ESLint stopped working with VSCode.
Run npm install?
At first, it seems to be pointless to add this in the list, I know. But I found myself forget to run npm install eslint so many times that I can’t remember, especially if the project is shared among a few people.
Restart VSCode
You’ll never know how many times I fixed the issue just by restarting VSCode, or my computer altogether. In rare times, the TypeScript server may have some internal issues and restarting the machine seems to be the best way to reset things to scratch.
Install ESLint + Plugins + Presets?
Take a look into your eslintrc configuration file and make a list of all plugins and presets. Than make sure, they as well as ESLint itself are in your projects devDependencies.
Make sure ESLint work for correct file extensions
In case you’re using TypeScript, Vue.js or other non-standard JavaScript files, make sure to tell ESLint about your file extensions by using the --ext flag like so --ext .js,.ts,.vue.
You can open VSCode settings.json file and add the following lines to make sure ESLint work with the detected languages. To do that, open Command Palette and find Open Settings (JSON) to open settings.json.
"eslint.validate": [
"vue",
"html",
"javascript",
"typescript",
"javascriptreact",
"typescriptreact"
]Also, check your user settings.json file before blindly sticking the same eslint.validate JSON config in each workspace individually.
Check for duplicate .eslintrc files
The default behavior of ESLint is to look for configuration files in higher directories automatically. So in order to avoid confusion and strange errors, make sure you have just a manageable number of .eslintrc in your project
Also, your .eslintrc may be named incorrectly as .eslintrc.js, in that case, simply rename the file does the trick.
When looking for more .eslintrc files, remember, that they might be invisible to your file explorer. Use ls -a or show hidden files in your file explorer so you can carefully inspect files.
Additionally, you can disable ESLint automatic configuration search by adding root option to the .eslintrc in your project root directory:
{
"root": true
}If you need more information, read Configuration Cascading and Hierarchy.
Alternatively, you can set eslint.workingDirectories to a manageable list of directories, instead of letting ESLint to search for configuration files. Put these lines in your VSCode global settings.json file.
"eslint.workingDirectories": [
"./backend",
"./frontend"
],ESLint runs in terminal but not VSCode
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.
Check ESLint log for errors
In VSCode, open the terminal by pressing Ctrl+` keyboard combination.
Select ESLint from the terminal channel dropdown. In here, you would find useful debugging information such as errors, warnings, etc.
For example, missing .eslintrc-.json throw this error:
Also, remember to check whether the ESLint extension is enabled globally or not.
