Extension 'eslint' is configured as formatter but it cannot format 'JavaScript'-files

Question

I am experiencing an intermittent problem with ESLint in VS Code. When saving a file, instead of formatting it, this message shows in the status bar:

Apparently no one has ever reported this message on Google.

When I say it is intermittent, it was working fine, then the computer (MBP) crashed, and on restarting this is the situation. It has happened previously, but I don't recall what I did to fix it.

The app is a fairly complex Vue-based app based on a pre-configured template. In package.json:

    "@vue/cli-plugin-eslint": "^4.5.13",

    "babel-eslint": "^10.1.0",
    "eslint": "^7.31.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-vue": "^7.14.0",

In the VS Code workspace file:

        "editor.codeLens": true,
        "eslint.format.enable": true,
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": true,
        },
        "[javascript]": {
            "editor.defaultFormatter": "dbaeumer.vscode-eslint"
        },
        "[vue]": {
            "editor.defaultFormatter": "dbaeumer.vscode-eslint"
        },
        "eslint.validate": [
            "javascript"
        ],
        "debug.javascript.usePreview": true,
        "debug.javascript.usePreviewAutoAttach": true,
        "[jsonc]": {
            "editor.defaultFormatter": "dbaeumer.vscode-eslint"
        },

I'm really not sure how to proceed to understand why vscode-eslint is reporting that it can't format JavaScript files.

EDIT

This issue regarding TypeScript gives some hints. It seems this error can result when the ESLint server is restarting or the extension host is under a lot of stress.

In my project now, most files are formatting fine, although one consistently fails. That file is called eslint.js and is part of a build process, running eslint - I don't totally understand the configuration. I suspect that saving this file somehow causes eslint to be run/reloaded, and while that is happening, eslint-vscode tries to also run it and fails.

Pallua

I had the same issue. To solve I used the Command Palette, clicked to format, got the same message, but VS Code gave me the option to configure -- which I did and it works now 🤷‍♂️ – Arrival

Answer 1

This can happen for a variety of reasons. The eslint output logs will tell you the issue.

In my case the settings field configFile was changed to overrideConfigFile

Halflife

In my case, I had set an invalid rule on my eslintrc.js. just check the Eslint errors. thanks @Halflife – Airs

If it helps : for me, problem was caused by a trailing comma in .estlintrc – Engvall

My ESLint output log shows no errors, but I'm still having this problem :(. – Respirator

This only outputs logs in some cases. Also, this tab doesn't usually output anything unless there's an error of this kind. Useful logs are off by default. – Massarelli

Answer 2

I was fighting with this for a while, turns out you need to head to Settings, under User go to Extensions > ESLint, scroll down to Format:Enable and enable ESLint as a formatter.

Settings:

Chameleon

For me this is already the case and I still receive the error. – Skidproof

For me disabling this setting and then re-enabling helped – Churning

@Churning that did not help me – Massarelli

Really helpful. Didn't know that it was disable even it was defined in .vscode/settings.json as "eslint.format.enable": true... because it was enabled in submodule. – Feminacy

Answer 3

I was actually experiencing the same problem and I only needed to remove the .eslintignore file, which only contained this line:

.eslintrc.js

You could simply comment that line too.

Hope that helps :)

Fizzy

Answer 4

In my case this was even simpler than the other answers here: I forgot to create a .eslintrc.js file for this project. So running npx eslint --init fixed it. Copying the file from another project would also work.

Hope this helps someone like me googling this error and getting to this question.

Birdwatcher

Answer 5

What worked for me was:

rm -rf node_modules
npm cache clean --force
npm install

Close VScode and then re-open

Legate

Answer 6

In my case, this is because the eslint version installed is too old. It seems that some old version just cann't format javascript.

Colby

Answer 7

For me, it seemed as if StandardJS was trying to lint everything in my node_modules folder. The error went away and linting started working again after adding a standard.ignore property to my package.json, followed by reloading VSCode:

{
  "name": "foo",
  "devDependencies": {
    "standard": "^16.0.4"
  },
  "dependencies": {
    // stuff...
  },
  "standard": {
    "ignore": [
      "**/node_modules/**"
    ]
  }
}

No idea why this behavior didn't happen automatically...

---

UPDATE: I previously had installed eslint alongside standard, which may have been the root cause. My original install command was npm install standard eslint, which installed the latest version of eslint, v8.x.x. However, standard (at the time of writing) depends on eslint v7.x.x, causing a conflict.

The fix:

~$ npm uninstall eslint # remove eslint from package.json
~$ rm -rf node_modules  # remove node_modules
~$ npm install          # get fresh installation

Stypsis

Answer 8

1. Disable ESLint extension
2. Reload window
3. Enable ESLint extension
4. Do npm i eslint -g, also install ESLint on the project using npm i eslint -D
5. Make sure VSCode settings.json does not have another default default formatter for JavaScript

{
  "eslint.enable": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "editor.formatOnType": true,
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  }
}

6. Reload window

That worked for me

Utrillo

Answer 9

for me it was because the .eslintrc file had an error inside, I had a coma on the end of a line in a JSON that make the file unreadable. check the log of eslint maybe it tell the issue

Monasticism

Answer 10

I see the Eslint log that show that: The language client requires VS Code version ^1.82.0 but received version 1.73.0 Then I update to the lastest version to resolve problem

Lavellelaven

Answer 11

Update for eslint ^v9.0.0

Configuration via "flat config" is now the default. In addition to setting eslint.format.enable to true, you'll also need to enable eslint.experimental.useFlatConfig.

You can find set this in .vscode/settings.json or change it via settings by hitting CTRL+, and searching for "flat config"

Since the older .eslintrc config is now deprecated, there is a push to move this out of an experimental state and enable it by default here

Ridinger

Answer 12

I edited my user settings.json. Added this.

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

Nonlegal

Answer 13

add these lines in your settings.json

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

Miyasawa

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Sallust