ESLint not configuring on save in VSCode - visual-studio-code

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

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