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

Br3wn0 Br3wn0 · Accepted Answer · 2021-03-09T14:08:41

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.

Eslint not showing warnings - React

1 Answers