React CRA with typescript not working with eslint

1
votes

I am trying to integrate linting into an app created using CRA which uses typescript.

Steps to reproduce on terminal

  • create-react-app my-app --typescript
  • ./node_modules/.bin/eslint --init
    • select : To check syntax, find problems, and enforce code style
    • select : JavaScript modules (import/export)
    • select : React
    • y for does your project use typescript
    • select : Browser
    • Popular style guide used is airbnb

My .eslintrc json file looks like the following

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "airbnb"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
      "semi":"warn"
    }
}

I usually check if the lint works by removing semi colon to see if vs code highlights.

However it does not happen.

2
reactjstypescriptvisual-studio-codeeslint

2 Answers

3
votes

Adding the following snippet to settings.json on VS code works.

"eslint.validate": [
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact"
],
-1
votes

There are two types of setting ESLint in React CRA.

  1. Local ESLint (Only affect the Editor such as VSCode)
  2. ESLint when Compiling (When running yarn start and saving file)

As there are too much (not needed) information on the internet, I created an article about this in a much simpler way in here.