CODEWITHSUNDEEP
typescriptvisual-studio-codecreate-react-appeslint
Crocsx
Crocsx

Reputation: 7640

Eslint is not working in my react application

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"
  1. 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"]
      }
    }
  }
}
  1. 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 ?

Upvotes: 5

Views: 13407

Answers (1)

Ilyas Assainov
Ilyas Assainov

Reputation: 2069

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!

Upvotes: 4

Related Questions