ESLint not configuring on save in VSCode

Question

I have a React project, and am having an issue with saving automatically in VSCode.

It works for Typescript files, but I am getting the following error:

"Extension 'Eslint' is configured as formatter but it cannot format 'Javascript'-files

I have looked at some other posts and tried configuring the settings.json explicitly for Javascript files as well, but that did not work.

My settings.json is as follows:

{
  "workbench.colorTheme": "Webstorm IntelliJ Darcula Theme",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "eslint.format.enable": true,
  "diffEditor.ignoreTrimWhitespace": false,
  "typescript.updateImportsOnFileMove.enabled": "always",
   // enable for eslint-plugin json-format
  "eslint.validate": [
    "json"
  ],
  "window.zoomLevel": 1,
  "i18n-ally.localesPaths": [
    "src/translations"
  ],
  "i18n-ally.keystyle": "nested",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

My eslintrc.json is as follows:

{
  "parser": "@typescript-eslint/parser",
  "extends": ["eslint:recommended", "next/core-web-vitals", "plugin:@typescript-eslint/recommended", "plugin:storybook/recommended", "plugin:react/recommended"],
  "plugins": ["unused-imports", "@typescript-eslint", "json-format"],
  "overrides": [
    {
      "files":  ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "rules": {
        "import/order": [
          "error",
          {
            "groups": ["builtin", "external", "internal"],
            "pathGroups": [
              {
                "pattern": "react",
                "group": "external",
                "position": "before"
              }
            ],
            "pathGroupsExcludedImportTypes": ["react"],
            "newlines-between": "always",
            "alphabetize": {
              "order": "asc",
              "caseInsensitive": true
            }
          }
        ],
        "semi": "error",
        "no-unused-vars": "off",
        "object-curly-spacing": ["error", "always"],
        "unused-imports/no-unused-imports": "error",
        "unused-imports/no-unused-vars": [
            "warn",
            { "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
        ],
        "no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 0, "maxBOF": 0 }],
        "brace-style": ["error", "1tbs"],
        "indent": ["error", 2],
        "max-len": [
          "warn",
          {
            "code": 80,
            "tabWidth": 2,
            "comments": 80,
            "ignoreComments": false,
            "ignoreTrailingComments": true,
            "ignoreUrls": true,
            "ignoreStrings": true,
            "ignoreTemplateLiterals": true,
            "ignoreRegExpLiterals": true
          }
        ],
        "jsx-quotes": ["error", "prefer-double"],
        "quotes": ["error", "single"],
        "space-infix-ops": ["error"],
        "@typescript-eslint/no-explicit-any": "error",
        "@typescript-eslint/type-annotation-spacing": "error",
        "react/jsx-sort-props": [
          2,
          {
              "callbacksLast": true,
              "shorthandFirst": false,
              "shorthandLast": true,
              "ignoreCase": true,
              "noSortAlphabetically": false
          }
        ],
        "react/react-in-jsx-scope": "off",
        "newline-before-return": "error"
      }
    }
  ],
  "env": {
    "jest": true
  }
}

My package.json includes the following dependencies:

 "dependencies": {
    "@emotion/cache": "^11.7.1",
    "@emotion/react": "^11.9.0",
    "@emotion/server": "^11.4.0",
    "@emotion/styled": "^11.8.1",
    "@mui/icons-material": "^5.6.1",
    "@mui/material": "^5.6.1",
    "next": "12.1.4",
    "next-i18next": "^11.0.0",
    "react": "18.0.0",
    "react-dom": "18.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.17.9",
    "@storybook/addon-actions": "^6.4.21",
    "@storybook/addon-essentials": "^6.4.21",
    "@storybook/addon-interactions": "^6.4.21",
    "@storybook/addon-links": "^6.4.21",
    "@storybook/builder-webpack5": "^6.4.21",
    "@storybook/manager-webpack5": "^6.4.21",
    "@storybook/react": "^6.4.21",
    "@storybook/testing-library": "^0.0.9",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.0.1",
    "@types/node": "17.0.23",
    "@types/react": "18.0.1",
    "@types/react-dom": "18.0.0",
    "@typescript-eslint/eslint-plugin": "^5.19.0",
    "@typescript-eslint/parser": "^5.19.0",
    "babel-jest": "^27.5.1",
    "babel-loader": "^8.2.4",
    "chromatic": "^6.5.4",
    "cz-conventional-changelog": "^3.3.0",
    "cz-emoji": "^1.3.1",
    "eslint": "^8.13.0",
    "eslint-config-next": "12.1.4",
    "eslint-plugin-json-format": "^2.0.1",
    "eslint-plugin-react": "^7.29.4",
    "eslint-plugin-storybook": "^0.5.8",
    "eslint-plugin-unused-imports": "^2.0.0",
    "husky": "^7.0.4",
    "jest": "^27.5.1",
    "typescript": "^4.6.3"
  }

Answer 1

You can remove next/core-web-vitals, and it will work. I spent four hours because of this.

Answer 2

Maybe add "javascript" to your "eslint.validate" setting:

{
  "workbench.colorTheme": "Webstorm IntelliJ Darcula Theme",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "eslint.format.enable": true,
  "diffEditor.ignoreTrimWhitespace": false,
  "typescript.updateImportsOnFileMove.enabled": "always",
   // enable for eslint-plugin json-format
  "eslint.validate": ["json", "javascript"],
  "window.zoomLevel": 1,
  "i18n-ally.localesPaths": [
    "src/translations"
  ],
  "i18n-ally.keystyle": "nested",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}