Eslint not showing warnings - React

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

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.

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.

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']
  }
};

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.