ESLint not working in VS Code?

Question

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.

Answer 1

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.

Answer 2

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" ],

Answer 3

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

Answer 4

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 default 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].

Answer 5

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.

Answer 6

In my case, I had not installed the ESLint extension in VSCode, which was causing issue. Did it and it started working again.

Answer 7

Since you are able to successfully lint via command line, the issue is most likely in the configuration of the ESLint plugin.

Assuming the extension is properly installed, check out all ESLint related config properties in both project (workspace) and user (global) defined settings.json.

There are a few things that could be misconfigured in your particular case; for me it was JavaScript disabled after working with TypeScript in another project and my global settings.json ended up looking following:

"eslint.validate": [
  { "language": "typescript", "autoFix": true }
 ]

From here it was a simple fix:

"eslint.validate": [
  { "language": "javascript", "autoFix": true },
  { "language": "typescript", "autoFix": true }
]

This is so common that someone wrote a straight forward blog post about ESLint not working in VS Code. I'd just add, check your global user settings.json before overriding the local workspace config.

Answer 8

I resolved the issue by restarting the ESLint Server. You can do this by opening up the Ctrl + P menu. Then you can enter > ESLint: Restart ESLint Server.

Answer 9

Restarting VSCode worked for me.

Answer 10

In my case ESLint was disabled in my workspace. I had to enable it in vscode extensions settings.

Answer 11

In my case setting eslint validate to : "eslint.validate": [ "javascript", "javascriptreact", "html", "typescriptreact" ], did the job.

Answer 12

If you are using a global installation of ESLint, any plugins used in your configuration must also be installed globally. Like wise for local install. if u have installed locally and properly configured locally, yet eslint isn't working, try restarting your IDE. This just happened to me with VScode.

Answer 13

In my case, I had to enable the ESLint "Always Show Status" setting in VSCode:

Then linting results started showing up immediately in VSCode.

Answer 14

I'm giving the response assuming that you have already defined rules in you local project root with .eslintrc and .eslintignore. After Installing VSCode Eslint Extension several configurations which need to do in settings.json for vscode

eslint.enable: true
eslint.nodePath: <directory where your extensions available>

Installing eslint local as a project dependency is the last ingredient for this to work. consider not to install eslint as global which could conflict with your local installed package.

Answer 15

I use Use Prettier Formatter and ESLint VS Code extension together for code linting and formating.

now install some packages using given command, if more packages required they will show with installation command as an error in the terminal for you, please install them also.

npm i eslint prettier eslint@^5.16.0 eslint-config-prettier eslint-plugin-prettier eslint-config-airbnb eslint-plugin-node eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks@^2.5.0 --save-dev

now create a new file name .prettierrc in your project home directory, using this file you can configure settings of the prettier extension, my settings are below:

{
  "singleQuote": true
}

now as for the ESlint you can configure it according to your requirement, I am advising you to go Eslint website see the rules (https://eslint.org/docs/rules/)

Now create a file name .eslintrc.json in your project home directory, using that file you can configure eslint, my configurations are below:

{
  "extends": ["airbnb", "prettier", "plugin:node/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "spaced-comment": "off",
    "no-console": "warn",
    "consistent-return": "off",
    "func-names": "off",
    "object-shorthand": "off",
    "no-process-exit": "off",
    "no-param-reassign": "off",
    "no-return-await": "off",
    "no-underscore-dangle": "off",
    "class-methods-use-this": "off",
    "prefer-destructuring": ["error", { "object": true, "array": false }],
    "no-unused-vars": ["error", { "argsIgnorePattern": "req|res|next|val" }]
  }
}

Answer 16

I had similar problem on windows, however sometimes eslint worked (in vscode) sometimes not. Later I realized that it works fine after a while. It was related to this issue: eslint server takes ~3-5 minutes until available

Setting enviroment variable NO_UPDATE_NOTIFIER=1 solved the problem

Answer 17

I had a similar problem with eslint saying it was '..not validating any files yet', but nothing was reported in the VS Code problems console. However after upgrading VS Code to the latest version (1.32.1) and restarting, eslint started working.

Answer 18

For me, i did accidentally disable ESLint when some prompt was shown by it.

Doing below steps fixed it for me

1. Shift + Command + P and select ESLint: Disabled ESLint
2. Close vscode
3. Shift + Command + P and select ESLint: Show Output Channel

Answer 19

If you are developing a project with eslint as an package.json dependency, make sure you run npm install. That fixed it for me.

Answer 20

After installing the Eslint npm package and/or VS Code Extension by Dirk baeumer, Create .eslintrc.js configuration file as per your coding conventions.

Then, Enable all ESLint configurations in VSCode settings as follows:

• Pressing shortcut key Ctrl + or Command + based on your OS OR search "Settings"
• Type @ext:dbaeumer.vscode-eslint in your Search bar
• Tick mark the following checkboxes
  • Eslint: Debug
  • Eslint: Enable
  • Eslint: Format Enable
  • Eslint: Lint Task Enable

Happy Linting

Answer 21

The .eslintrc.js file had a typo . More specifically I tried to add a rule in a wrong way . Once I removed the falsey rule everything was working fine immediately .

Answer 22

In my case, it wasn't working because I had added only one folder of the monorepo to the project, even though I had the package.json and the extension configured. I worked only when I added the whole project (which contained the package.json file) to the VS Code.

Answer 23

Windows user here.

Tried everything, nothing worked. Finally removing the folder with eslint in .vscode/extensions and reinstalling fixed!

C:\Users<user>.vscode\extensions

Answer 24

Go to your settings.json file, add the following and, fix the eslint.nodepath. Tailor it to your own preferences.

 // PERSONAL
  "editor.codeActionsOnSaveTimeout": 2000,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "editor.fontSize": 16,
  "editor.formatOnSave": true,
  "explorer.confirmDragAndDrop": true,
  "editor.tabSize": 2,
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "eslint.nodePath": "C:\\{path}",
  "eslint.workingDirectories": ["./backend", "./frontend"],

Answer 25

In my case, I had the .eslintrc.json file inside the .vscode folder. Once I moved it out to the root folder, ESLint started working correctly.

Answer 26

You can open problem tab to check there is an ESLint permission request or not. If you see it, try to click the lightbulb and fix the issue, it works for me.

problem tab in vscode terminal window

wish you luck!

Answer 27

If you are using Yarn version 2, it might be the culprit. For me, once I ran yarn set version classic and yarn install everything started working again.

Answer 28

I had the same issue. ESLint extension was enabled and .eslintrc file had some rules but VS Code did not show any autofix for my code.

The problem was in my folder structure, it was something like that

-workspace-folder
  -client
    -node_modules
    -src
    -.eslintrc.json
    -package.json
    -...other files

After changing folder structure to the like below example, with the delete package-lock.json and reinstallation of all deps, VS code began to show es lint errors.

-workspace-folder
   -node_modules
   -src
   -.eslintrc.json
   -package.json
   -...other files

Answer 29

I get the same problem of eslint not working. When adding these extensions in .eslintrc.json file, it works fine for me :

"extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
      ],

Answer 30

In my case, I followed https://eslint.org/docs/user-guide/getting-started#installation-and-usage to setup the es-lint. But after the installation it's wasn't working.

Fix: But just restarting the vs-code solved the problem for me.

Answer 31

In my case ESLint was properly installed and enabled and working in another workspace with identical settings.

What helped was to disable the extension in the workspace where it was not working, reload VSCode and then enable the extension back. Then it immediately started working.

Answer 32

For me, the latest version of eslint does not work correctly with Visual Studio code in all my packages, so I had to install an earlier global version:

npm i -g eslint@7.32.0

J

Answer 33

For me, it was a problem with using nvm to install node.

In a terminal, run npm root -g to get the global node_modules install folder. It should look something like /Users/{username}/.nvm/versions/node/v16.12.0/lib/node_modules (for mac).

Then, in the settings for ESLint, edit the Node Path to point to this node_modules location.

Answer 34

I had .eslintignore defined and it referred to a subfolder that I was checking.

When I ran command line, eslint let me know that .eslintignore was blocking the analysis of my file. In vscode no such message.

So double check your .eslintignore file.

Answer 35

Simple Solution (not best): Add an empty eslint.options to setting.json; this has worked for me:

"eslint.options": {}