CODEWITHSUNDEEP
eslintvisual-studio-codelint
Dennis
Dennis

Reputation: 3690

ESLint in VSCode not fixing on save

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. eslint warnings

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.

Upvotes: 133

Views: 192251

Answers (13)

Bona
Bona

Reputation: 11

In my case, the issue was resolved by uninstalling and reinstalling the ESLint extension.

Upvotes: 1

Wojciechu
Wojciechu

Reputation: 3900

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

 {
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  }
 }

source

Upvotes: 158

John Smith
John Smith

Reputation: 51

  1. Open VS Code's settings

    Image

  2. Click the "Open settings (JSON)" button in the top right

    Image

  3. Add "eslint.workingDirectories": [{ "mode": "auto" }], to the JSON file

    Image

  4. Save the file, then restart VSCode

Upvotes: 5

Shah
Shah

Reputation: 2854

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!

Upvotes: 92

Allie C
Allie C

Reputation: 301

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!

Upvotes: 30

Ray Remnant
Ray Remnant

Reputation: 111

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"}

Upvotes: 4

Király József
Király József

Reputation: 25

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.

Upvotes: 2

rebinnaf
rebinnaf

Reputation: 513

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.

Upvotes: 1

Toma Nistor
Toma Nistor

Reputation: 905

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

Upvotes: 4

isAif
isAif

Reputation: 2334

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.

Upvotes: 18

utkarsh-k
utkarsh-k

Reputation: 983

enter image description here

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!

enter image description here

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)

Upvotes: 9

Eino Gourdin
Eino Gourdin

Reputation: 4507

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:

enter image description here

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

Upvotes: 28

Dennis
Dennis

Reputation: 3690

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

Upvotes: 45

Related Questions