Eslint is not working in my react application

Question

I am trying to add eslint to my typescript create-react-app application. I am using Visual Studio Code.

I did :

1. Download Eslint package in visual code
2. Download Eslint package
3. I installed 3 eslint plugin

    "eslint:recommended", 
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"

4. Create an .eslintrc file that look like this in the app's root folder

{
  "plugins": [
    "react"
  ],
  "extends": [
    "eslint:recommended", 
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 7,
    "sourceType": "module",
    "ecmaFeatures": {
        "jsx": true
    }
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "settings": {
    "import/resolver": {
      "node": {},
      "babel-module": {
        "root": ["./src"]
      }
    }
  }
}

5. Started eslint and restart vs code

Now, I try to do some linting problem like trailing spaces or not pascalCase, but I never get warned by Eslint, I only see typescript errors, but never some linting issues like.

Is there some additional configuration to do to make it work on my workspace ?

Answer 1

Had a similar issue. Turned out I didn't specify any rules, so technically Eslint was working, but no rules were set up. As a starter, try to extend Airbnb rules:

"extends": [
    "eslint:recommended", 
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "airbnb"
  ],

You should also specify a TypeScript parser for your files:

module.exports = {
  parser: '@typescript-eslint/parser',
  ...
}

Don't forget to install the above: npm i --save-dev @typescript-eslint/parser

And finally check if you have Eslint Extension set-up for your editor!