ESLint in VSCode not fixing on save

Question

I am using ESLint in my Vue(Nuxt) project in VSCode. When I save I would like my ESLint to run automatically and fix all the warnings for me automatically.

This is my settings.json file in VSCode:

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.validation.template": false,
    "vetur.completion.scaffoldSnippetSources": {},
    "vetur.completion.useScaffoldSnippets": false,
    "vetur.format.defaultFormatter.html": "none",
    "workbench.iconTheme": "material-icon-theme",
    "git.autofetch": true,
    "git.defaultCloneDirectory": "",
    "gitlens.views.repositories.files.layout": "list",
    "editor.tabSize": 2,
    "editor.detectIndentation": false,
}

And this is my .eslintrc.js file:

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [
    "@nuxtjs",
    "plugin:nuxt/recommended",
    "../.eslintrc.js"
  ],
  rules: {
    //Add custom rules for the frontend here.
    //Rules that are common for shared, frontend and backend should go in the parent file
    "nuxt/no-cjs-in-config": "off",
  },
}

The linked ../.eslintrc.js file contains the following:

module.exports = {
  parserOptions: {
    parser: 'babel-eslint',
  },
  plugins: ['jest'],
  rules: {
    'prefer-const': 'off',
    'comma-dangle': ['error', 'always-multiline'],
    'prefer-template': 'error',
  },
  env: {
    'jest/globals': true
  }
}

Whenever I save the file the warnings just show up and will not automatically fix themselves.

EDIT: I've turned on verbose output and i'm seeing this in the output:

(node:6832) UnhandledPromiseRejectionWarning: Error: Failed to load plugin 'import' declared in 'frontend\.eslintrc.js » @nuxtjs/eslint-config': Cannot find module 'eslint-plugin-import'
Require stack:

I've then ran yarn add eslint-plugin-import and tried again, it still returns the same error.

score 102 · Answer 1 · edited Feb 25 '23 at 09:02

102

Get eslint plugin, add this code to your settings.json

 {
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "eslint.validate": ["javascript"]
 }

source

edited Feb 25 '23 at 09:02

shackleton

701
1
12
27

answered Jun 17 '21 at 08:56

Wojciechu

3,314
2
14
10

7

.eslint is deprecated afaik, works just source.fixAll – Geoffrey Hale Feb 04 '22 at 22:23
1

Note that one downside of {"source.fixAll": true} is that VSCode will automatically delete any code you have that runs past a return statement. So, if you are testing, comment out the code instead of using "return" – shackleton Feb 28 '23 at 21:50
@shackleton maybe this can be changed in lint rules – Shah Jun 01 '23 at 06:07

score 63 · Answer 2 · edited May 09 '23 at 18:42

63

Create the following path .vscode/settings.json on the root of the project directory, then paste and save the following:

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

You're good to go!

edited May 09 '23 at 18:42

Klesun

12,280
5
59
52

answered Jul 16 '21 at 19:08

Shah

2,126
1
16
21

2

For anyone using VSCodium on Ubuntu, the location of settings.json is "~/.config/VSCodium/User/settings.json" – Peter Out Aug 27 '21 at 01:24
1

Thanks, I was finally able to solve it with this. Thank you so much. – JustAnotherCoder Sep 26 '21 at 18:44
5

For anyone confused like me: This settings should be placed in projectFolder/.vscode/ – Jan Málek Mar 22 '22 at 08:33
2

why on Earth this is not coming with eslint extension settings... – Maksim Nesterenko Apr 12 '22 at 09:27
1

eslint.validate is legacy. Release notes states: "This is an old legacy setting and should in normal cases not be necessary anymore." https://github.com/microsoft/vscode-eslint – tweini Apr 16 '22 at 18:16

score 41 · Answer 3 · answered Jun 10 '20 at 07:55

41

I've managed to fix the issue. The problem was that there were multiple working directories in my solution, which all have their own eslint config. Putting the following line in the settings.json file of VSCode solved my issue:

"eslint.workingDirectories": [{ "mode": "auto" }]

answered Jun 10 '20 at 07:55

Dennis

3,044
2
33
52

1

Would be good to understand why this is necessary, as I haven't seen this anywhere else. – Akaisteph7 Dec 17 '20 at 20:33
Another option is `[{"pattern": "./packages/*/"}]`. This is for people who use a monorepo layout through yarn workspaces or lerna. For more options see https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint#settings-options – smac89 Sep 22 '22 at 18:22

score 27 · Answer 4 · answered Mar 02 '21 at 16:52

27

I tried those solutions and others, and it still didn't work. Actually it was just that ESLint's use had to be approved for use in VSCode. That is, I clicked on the ESLint item on the editor's bottom bar:

Which opened a popup asking me to approve ESLint. After approval autocorrect was running as expected.

answered Mar 02 '21 at 16:52

Eino Gourdin

4,169
3
39
67

1

I don't have those ticks next to the "ESLint" text and not sure if I allowed the extension or not. Is there a way to check if the extension is approved? Or how can I allow it? – DariusP Jan 04 '22 at 10:56

score 16 · Answer 5 · edited Feb 09 '22 at 16:44

16

Install ESLint extension from the VSCode marketplace.

Once the ESLint extension has installed you may use CTRL + SHIFT + P to open the Command Palette. Search “ESLint fix all auto-fixable Problems” and press enter.

This command would enable eslint to fix the file on save.

edited Feb 09 '22 at 16:44

Shah

2,126
1
16
21

answered Jun 09 '20 at 16:34

isAif

2,126
5
22
34

1

Thank you for your comment! I've tried that out, and a info window in the bottom right is showing up giving me the following message: "Failed to apply ESLint fixes to the document. Please consider opening an issue with steps to reproduce." – Dennis Jun 10 '20 at 06:43
I've added extra info in my original question after seeing the verbose output. – Dennis Jun 10 '20 at 07:25
6

What do you mean this option should be enabled? `ESLint fix all auto-fixable Problems` is not an option, it's an action. – ffxsam Mar 18 '21 at 16:24
2

for mac its CMD+SHIFT+P – Partha Roy Oct 20 '21 at 13:55
2

This just fixes it once. The OP wanted to know how to fix it on save. – Adam Zerner Mar 10 '22 at 06:14

score 13 · Answer 6 · answered Sep 02 '22 at 19:34

I ran into a similar problem-- ESLint was not properly formatting only certain, seemingly random, files on save. Running ESLint --fix would fix the formatting errors, but saving would not. Adding this line to our workspace settings.json fixed the problem:

"eslint.format.enable": true,

Making all our formatter settings look like this:

  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "eslint.format.enable": true,

You can also go into the ESLint extension settings and check off the checkbox labeled ESLint > Format:Enable. Worked like a charm!

score 8 · Answer 7 · answered Aug 06 '21 at 23:40

In the snap above as you can see that I am getting eslint errors and just to inform you all that despite saving the file, all auto-fixable problems are were not getting fixed by eslint/prettier setup.

So I tried pressing ctrl+shift+p and selecting prettier as default formatter and also tried doing eslint restart server but that didn't worked.

I noticed that vscode was giving me some notifications at the bottom right corner (bell icon). I clicked on that and some list of pop up came up stating that there are multiple formatters installed for the same extension file. Like for example in the below snap there is .jsx file(it had two formatters one was prettier and other was vscodes inbuilt formatter). I clicked on configure button and selected prettier as default and when I saved the file it worked!

If this doesn't works for you then I think this all worked for me because I had eslint npm packages installed in my project that works with prettier to enforce the prettier rules. (these packages are eslint-config-prettier and eslint-plugin-prettier)

The little bell saved my day, Thanks to you! – Tom Smykowski Jun 29 '23 at 10:10 — Tom Smykowski, Jun 29 '23 at 10:10

score 4 · Answer 8 · answered Feb 26 '22 at 04:17

4

What fixed it for me was adding this to settings.json, because VSCode didn't know what formatter I wanted to be used on save:

  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },

answered Feb 26 '22 at 04:17

Toma Nistor

786
10
18

score 4 · Answer 9 · answered May 20 '22 at 14:33

4

Check if in the settings.json there are other formatters enabled, in my case I had this by mistake.

"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"}

answered May 20 '22 at 14:33

Ray Remnant

79
7

score 1 · Answer 10 · answered Apr 25 '22 at 14:15

After getting the Eslint plugin you need to add this line to the settings.json:

{
    
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

Still not working? check if your eslint works fine by running this in the terminal:

eslint --ext \".js,.vue\" --ignore-path .gitignore .

If it failed with exit code 2 try removing node modules and install again. After running this command you should see the eslint errors.

score 1 · Answer 11 · answered May 01 '22 at 11:28

I was dealing with the same issue, and nothing seemed to help, even though I did all the configurations correctly, and ESLint was marking the problems in my files correctly.

For me the solution was to move the .vscode folder to the project root.

Now everything works as intended.

score 1 · Answer 12 · edited Jun 13 '23 at 01:25

1

Open VS Code's settings
Click the "Open settings (JSON)" button in the top right
Add "eslint.workingDirectories": [{ "mode": "auto" }], to the JSON file
Save the file, then restart VSCode

edited Jun 13 '23 at 01:25

user16217248

3,119
19
19
37

answered Jun 07 '23 at 22:19

John Smith

11
2

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/34513982) – Aaron Meese Jun 11 '23 at 17:37

ESLint in VSCode not fixing on save

12 Answers12

Linked