Eslint not showing warnings - React

Question

On my new project, ESLint is not outputting warnings like before, I'm using VSCode. If I have an unsed var somewhere in my code, it doesn't show the warning in the terminal output anymore. Only in the problem tab.

Here's my eslint config file:

.eslintrc.json

{
  "env": {
      "browser": true,
      "es6": true
  },
  "extends": [
      "plugin:react/recommended",
      "airbnb-typescript",
      "plugin:@typescript-eslint/recommended",
      "plugin:@typescript-eslint/eslint-recommended",
      "prettier/@typescript-eslint",
      "plugin:prettier/recommended"
  ],
  "globals": {
      "Atomics": "readonly",
      "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
      "ecmaFeatures": {
          "jsx": true
      },
      "ecmaVersion": 2018,
      "sourceType": "module",
      "project": "./tsconfig.json"
  },
  "plugins": [
      "react",
      "react-hooks",
      "@typescript-eslint",
      "prettier"
  ],
  "rules": {
    "prettier/prettier": "error",
    "react-hooks/rules-of-hooks":"error",
    "react-hooks/exhaustive-deps": "warn",
    "camelcase": "off",
    "@typescript-eslint/camelcase": "off",
    "react/jsx-filename-extension": [1, {"extensions": [".tsx"]}],
    "import/prefer-default-export": "off",
    "react/jsx-one-expression-per-line": "off",
    "react/jsx-props-no-spreading": "off",
    "react/prop-types": "off",
    "no-unused-expressions": "off",
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/explicit-function-return-type": [
      "error",
      {
        "allowExpressions": true
      }
    ],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never"
      }
    ],
    "semi":"off"
  },
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}

and Here is my package.json devDependencies:

package.json

  "dependencies": {
    ...,
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "^4.0.2"
  }
  "devDependencies": {
    "@types/react-router-dom": "^5.1.7",
    "@types/styled-components": "^5.1.7",
    "@typescript-eslint/eslint-plugin": "^4.14.2",
    "@typescript-eslint/parser": "^4.14.2",
    "eslint": "^7.19.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-airbnb-typescript": "^12.3.1",
    "eslint-config-prettier": "^7.2.0",
    "eslint-import-resolver-typescript": "^2.3.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "husky": "^5.0.8",
    "prettier": "^2.2.1",
    "prettier-eslint-cli": "^5.0.0",
    "typescript": "^4.1.3"
  }

Answer 1

The thing that worked for me was the same as @Br3wn0. I had removed the following section from package.json:

  "eslintConfig": {
    "extends": [
        "react-app"
    ]
  }

Answer 2

After the latest eslint migration, you should disable the option Eslint: Use Flat Config option from vscode settings.

I was using an eslint.config.mjs file and in this case, vscode was not showing any warning in the IDE, while the eslint configuration was perfect!

Answer 3

{
     "extends": [
       "eslint:recommended",
       "plugin:react/recommended"
     ],
     "plugins": [
       "react"
     ],
     "parserOptions": {
       "ecmaVersion": 2021,
       "sourceType": "module",
       "ecmaFeatures": {
         "jsx": true
       }
     },
     "rules": {
       "react/prop-types": "off",
       "react/react-in-jsx-scope": "off"
     }
   }

Answer 4

If your project started from a Create React App then it might happens because of the way React team implemented eslint in the webpack.config.dev file.

When your project is being built, it uses eslint-webpack-plugin to make sure that eslint error appears on your app as an overlay.

The problem is that in their default configuration they point eslint to a specific eslint configuration (eslint-config-react-app/base see 👇🏼)

        new ESLintPlugin({
          // Plugin options
          extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
          formatter: require.resolve('react-dev-utils/eslintFormatter'),
          eslintPath: require.resolve('eslint'),
          failOnError: !(isEnvDevelopment && emitErrorsAsWarnings),
          context: paths.appSrc,
          cache: true,
          cacheLocation: path.resolve(
            paths.appNodeModules,
            '.cache/.eslintcache'
          ),
          // ESLint class options
          cwd: paths.appPath,
          resolvePluginsRelativeTo: __dirname,
          baseConfig: {
            extends: [require.resolve('eslint-config-react-app/base')], // <-- here
            rules: {
              ...(!hasJsxRuntime && {
                'react/react-in-jsx-scope': 'error',
              }),
            },
          },
        }),

I always use the eject option and after removing all the properties under // ESLint class options, the project started to look at my own eslint configuration file and everything went as expected.

I don't know why they set it like that tbh.

Answer 5

You can check if ESLint works correctly by directly invoking the command ./node_modules/.bin/eslint .. This way you'll get more helpful error messages if there are any. Also, make sure to check if you have multiple configuration files. Have a look at this ESLint Documentation page to make sure, your configuration is the only (or the one with the highest priority).

If there are multiple configuration files in the same directory, ESLint will only use one. The priority order is as follows:

1. .eslintrc.js
2. .eslintrc.cjs
3. .eslintrc.yaml
4. .eslintrc.yml
5. .eslintrc.json
6. package.json

Answer 6

Some tips to get it work

1. Check eslint extension, it should be installed and enabled.

2. Set these values in your VSCode configs ctrl + ,:

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

3. Sometimes it requires restarting eslint server after config changes applied.

• Press Ctrl + Shift + p (⇧ ⌘ P) to open VSCode command palette menu
• Type restart
• Select ESLint: Restart ESLint Server

Or just restart VSCode.

Answer 7

I have installed in my project all this eslint plugins:

"eslint": "^4.19.1" 
"eslint-config-airbnb-base": "^12.1.0"
"eslint-import-resolver-babel-plugin-root-import": "^1.1.1"
"eslint-import-resolver-webpack": "^0.9.0"
"eslint-loader": "^2.2.1"
"eslint-plugin-import": "^2.19.1"
"eslint-plugin-jest": "^21.15.1"
"eslint-plugin-react": "^7.17.0"

And I have this config in my .eslintrc.js

const PATHS = require('./../paths');
const rootImportRegex = '~/(components|chains|output-types|utilities)/';

module.exports = {
  parser: 'babel-eslint',
  env: {
    browser: true,
    commonjs: true,
    es6: true,
    node: true
  },
  settings: {
    'import/resolver': {
      webpack: {
        config: `${PATHS.config}/webpack.base.js`
      }
    },
  },
  extends: [
    'airbnb-base',
    'plugin:react/recommended',
    'plugin:jest/recommended'
  ],
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 6,
    ecmaFeatures: {
      jsx: true
    }
  },
  rules: {
    'max-len': [2, 120, 2],
    'import/no-extraneous-dependencies': ['error', { 'devDependencies': true }],
    'import/no-unresolved': ['error', { ignore: [rootImportRegex] }],
    'import/extensions': ['warning', 'ignorePackages']
  }
};

Answer 8

I had the same issue, for me was that in my package.json I had this esLint configuration missing:

"eslintConfig": {
    "extends": [
        "react-app",
        "react-app/jest"
    ]
},

Probably removed it by mistake.