Eslint is working from terminal, but not showing error in the editor UI (VSCode)

Question

I've installed the ESlint by following these steps: https://travishorn.com/setting-up-eslint-on-vs-code-with-airbnb-javascript-style-guide-6eb78a535ba6

Now, my ESlint is working from the terminal, but errors/warnings are not displaying in the code window, here is my project structure and how it is looks like:

and my eslintrc configs:

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es6: true,
    node: true,
  },
  extends: [
    'airbnb-base',
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaVersion: 2018,
  },
  rules: {
  },
};

Why it couldn't show errors in the editor?

You have the eslint extension installed too, right? This one: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint — Stephen M Irving, Jan 12 '20 at 20:11
Your instructions tell you to create the eslintrc file yourself, did you try just having eslint do it do you automatically by using `npx eslint --init`? I would try that since you don't have custom rules, just to ensure that your config file is correct and rule that out as a possible cause. — Stephen M Irving, Jan 12 '20 at 20:15
I have ESLint extension installed, and I've also created `.eslintrc` with the `eslint --init` — Karen, Jan 12 '20 at 20:27
Under settings > eslint, make sure Eslint:Enabled is checked. — G Gallegos, Jan 12 '20 at 21:27
I am having the same issue, everything works well with prettier and the webpack loader (errors and warning displayed at build in terminal) but no linting on the code itself — Alice Rocheman, Jul 07 '20 at 08:19
Do you get any messages in the Output tab? The Output tab is in the bottom panel, you can select ESLint in the dropdown menu on the top right corner of the same panel. Most likely the ESLint in VSCode is having problems to either finding the config file or with the content of the config file. — Rafael Rozon, May 10 '21 at 23:17

score 9 · Answer 1 · answered Dec 18 '20 at 16:59

9

I ran into this recently, and fixed it by changing my .eslintrc.js file to just .eslintrc (JSON object only, no comments, everything quoted right, no extension). After restarting VSCode it picked up the file properly and gave me linter errors in VSCode.

answered Dec 18 '20 at 16:59

radicand

6,068
3
27
22

This worked! Idk why it worked... but I'm glad it did – Michael Ozeryansky Dec 03 '21 at 01:22
1

This didn't work for me :( – geoyws Jan 27 '23 at 02:27
Ah yeah, didn't need to change any filename, just needed to close the VSCode window, then reopen the window for my project (`code .`), and it loaded all the eslint errors, as desired. Thanks for the "restart" tip! – user3773048 Jul 11 '23 at 22:19
Eslint just stopped working in my project one day. I did the opposite where I had a `.eslintrc` and changed it to `.eslintrc.js`. That made it showing lint warnings again. I changed the filename back to `.eslintrc` again and it kept working so, it fixed the problem for me. – Nifel Sep 01 '23 at 16:18

score 4 · Answer 2 · answered Mar 04 '22 at 07:28

4

for me it's work !

setting.json add this

"eslint.validate": [
    "vue",
    "html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
]

https://linuxpip.org/eslint-not-working-in-vscode/

answered Mar 04 '22 at 07:28

Vincent Cheung

41
1

score 1 · Answer 3 · answered Sep 08 '22 at 20:18

I followed all the advice and still had issues. I am using Typescript + YARN 2 (w\ PnP).

The error I was receiving was Failed to load the ESLint library for the document [filename].ts

What fixed it for me was that I needed to create some editor SDKs and settings with the command:

yarn dlx @yarnpkg/sdks vscode.

My .vscode/settings.json for eslint looks like:

  "eslint.enable": true,
  "eslint.packageManager": "yarn",
  "eslint.alwaysShowStatus": true,
  "eslint.validate": [
    "html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ],
  "eslint.nodePath": ".yarn/sdks"

The command above added "eslint.nodePath": ".yarn/sdks"

I found this here (I followed this and this to get there).

Thank you for this! This worked for me when using .eslintrc.js. However, the new "flat config" system (eslint.config.js) is still problematic with the VS Code ESLint extension even though they have a flag to enable it. I'll fall back to using the old config for a little while longer. https://github.com/microsoft/vscode-eslint#release-notes — AGDevX, Jan 28 '23 at 19:08

Eslint is working from terminal, but not showing error in the editor UI (VSCode)

3 Answers3