reactjstypescriptvisual-studio-codeeslinteslintrc

eslintrc not being used by vscode


The Problem

Due to my .eslintrc.json not being read by vscode, I get the following error for any type: Unexpected any. Specify a different type. (eslint@typescript-eslint/no-explicit-any).

enter image description here

For some reason, this was working yesterday, and now it's not. I was able to duplicate this issue with the a startup project(see github link at bottom)

The Code/Config

App.tsx

import React, { useEffect } from 'react';
import { Home } from 'src/views';

function sleep(delay: number) {
  return new Promise(resolve => {
    setTimeout(resolve, delay);
  });
}

function App() {
  useEffect(() => {
    const testTypeAny = async () => {
      try {
        await sleep(3000);
      } catch (error: any) { // <------ any error
        console.log('error:', error);
      }
    };
    testTypeAny();
  }, []);
  return <Home />;
}

export default App;

.vscode/settings.json

{
  "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript"
  ],
  "globals": {
    "fetch": false
  },
  "overrides": [
    {
      "files": ["*.js", "*.mjs"],
      "rules": {
        "@typescript-eslint/ban-types": "off",
        "@typescript-eslint/explicit-module-boundary-types": "off",
        "@typescript-eslint/no-empty-function": "off",
        "@typescript-eslint/no-empty-interface": "off",
        "@typescript-eslint/no-explicit-any": "off",
        "@typescript-eslint/no-non-null-assertion": "off",
        "@typescript-eslint/no-var-requires": "off"
      }
    },
    {
      "files": ["*.ts", "*.tsx"],
      "extends": [
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/recommended-requiring-type-checking"
      ],
      "parserOptions": {
        "project": ["./tsconfig.json"]
      },
      "rules": {
        "@typescript-eslint/explicit-module-boundary-types": "off",
        "@typescript-eslint/no-floating-promises": "off"
      }
    }
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "allowImportExportEverywhere": true,
    "ecmaFeatures": { "jsx": true },
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": [
    "@typescript-eslint",
    "import",
    "prettier",
    "react",
    "react-hooks"
  ],
  "rules": {
    "@typescript-eslint/ban-types": [
      "error",
      {
        "extendDefaults": true,
        "types": { "{}": false }
      }
    ],
    "@typescript-eslint/explicit-module-boundary-types": "warn",
    "@typescript-eslint/no-empty-function": "off",
    "@typescript-eslint/no-empty-interface": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "class-methods-use-this": "off",
    "comma-dangle": "off",
    "indent": "off",
    "indent-legacy": 0,
    "import/no-unresolved": 0,
    "import/named": 0,
    "import/namespace": 0,
    "import/default": 0,
    "import/no-named-as-default-member": 0,
    "no-param-reassign": [2, { "props": false }],
    "no-tabs": ["off", { "allowIndentationTabs": true }],
    "no-use-before-define": "warn",
    "no-unused-vars": "warn",
    "quotes": ["error", "single", { "avoidEscape": true }],
    "react-hooks/rules-of-hooks": "off",
    "react-hooks/exhaustive-deps": "warn",
    "react/jsx-filename-extension": "off",
    "react/jsx-uses-react": "off",
    "react/jsx-uses-vars": "error",
    "react/prop-types": "off",
    "react/react-in-jsx-scope": "off",
    "react/require-default-props": "off",
    "sort-imports": [
      "error",
      {
        "ignoreCase": false,
        "ignoreDeclarationSort": true,
        "ignoreMemberSort": false,
        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
      }
    ]
  },
  "settings": {
    "react": {
      "createClass": "createReactClass",
      "pragma": "React",
      "fragment": "Fragment",
      "version": "detect"
    }
  }
}

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": false,
    "paths": {
      "src/*": ["./src/*"]
    },
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "es5",
    "useUnknownInCatchVariables": true
  },
  "include": ["src", "App.tsx", "test", "**/*.[jt]s?(x)"],
  "exclude": ["node_modules", "public", "yarn.lock"]
}

All other supporting files can be found in the github link: https://github.com/jamespagedev/react-ts-linting/tree/type-error-any


Solution

  • Why don't you keep the config flat, why is it unnecessarily complicated

    Here's your issue in the overrides section:

    ...
        }
        },
        {
          "files": ["*.ts", "*.tsx"],
          "extends": [
            "plugin:@typescript-eslint/recommended",
            "plugin:@typescript-eslint/recommended-requiring-type-checking"
          ],
          "parserOptions": {
            "project": ["./tsconfig.json"]
          },
          "rules": {
            "@typescript-eslint/explicit-module-boundary-types": "off",
            "@typescript-eslint/no-floating-promises": "off",
            "@typescript-eslint/no-explicit-any": "off" <--- add the rule here
          }
        }
      ],
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "allowImportExportEverywhere": true,
        "ecmaFeatures": { "jsx": true },
        "ecmaVersion": "latest",
        "sourceType": "module",
    ...
    

    It makes 0 sense that you're overriding your own configuration, here I removed the overrides section

    {
      "env": {
        "browser": true,
        "es2021": true
      },
      "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended",
        "prettier",
        "plugin:import/errors",
        "plugin:import/warnings",
        "plugin:import/typescript"
      ],
      "globals": {
        "fetch": false
      },
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "allowImportExportEverywhere": true,
        "ecmaFeatures": { "jsx": true },
        "ecmaVersion": "latest",
        "sourceType": "module",
        "project": "./tsconfig.json"
      },
      "plugins": ["@typescript-eslint", "import", "prettier", "react", "react-hooks"],
      "rules": {
        "@typescript-eslint/no-var-requires": "off",
        "@typescript-eslint/ban-types": [
          "error",
          {
            "extendDefaults": true,
            "types": { "{}": false }
          }
        ],
        "@typescript-eslint/explicit-module-boundary-types": "warn",
        "@typescript-eslint/no-empty-function": "off",
        "@typescript-eslint/no-empty-interface": "off",
        "@typescript-eslint/no-explicit-any": "off",
        "@typescript-eslint/no-non-null-assertion": "off",
        "class-methods-use-this": "off",
        "comma-dangle": "off",
        "indent": "off",
        "indent-legacy": 0,
        "import/no-unresolved": 0,
        "import/named": 0,
        "import/namespace": 0,
        "import/default": 0,
        "import/no-named-as-default-member": 0,
        "no-param-reassign": [2, { "props": false }],
        "no-tabs": ["off", { "allowIndentationTabs": true }],
        "no-use-before-define": "warn",
        "no-unused-vars": "warn",
        "quotes": ["error", "single", { "avoidEscape": true }],
        "react-hooks/rules-of-hooks": "off",
        "react-hooks/exhaustive-deps": "warn",
        "react/jsx-filename-extension": "off",
        "react/jsx-uses-react": "off",
        "react/jsx-uses-vars": "error",
        "react/prop-types": "off",
        "react/react-in-jsx-scope": "off",
        "react/require-default-props": "off",
        "sort-imports": [
          "error",
          {
            "ignoreCase": false,
            "ignoreDeclarationSort": true,
            "ignoreMemberSort": false,
            "memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
          }
        ]
      },
      "settings": {
        "react": {
          "createClass": "createReactClass",
          "pragma": "React",
          "fragment": "Fragment",
          "version": "detect"
        }
      }
    }