How to configure eslint on starting react app

Question

I am working on react application with typescript. I have created react application using : npx create-react-app test-app --template typescript

eslint is already configured here when we create app using create-react-app in react-scripts

But when I do npm start, eslint error not coming

In App.tsx, I added one console.log("test") for testing. And then in eslintConfig in package.json, added below :

rules : { "non-console" :"error" }

Now, when I start react application, not getting error message in console that console.log is used. But, when I save App.tsx, error message comes for console.

How can I get eslint this console error on starting react application itself.

Answer 1

Add "lint:fix": "tslint --fix --project .", in scripts (package.json)

Create tslint.json

{
  "defaultSeverity": "error",
  "extends": [
    "tslint:latest",
    "tslint-react",
    "tslint-plugin-prettier",
    "tslint-config-prettier"
  ],
  "rules": {
    "no-angle-bracket-type-assertion": false,
    "no-object-literal-type-assertion": false,
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ],
    "quotemark": [
      true,
      "single",
      "jsx-double"
    ],
    "arrow-parens": false,
    "object-literal-sort-keys": false,
    "jsx-no-lambda": false
  }
}

install tslint dependencies (i use this versions)

"tslint": "5.20.0",
"tslint-config-prettier": "1.18.0",
"tslint-plugin-prettier": "2.0.1",
"tslint-react": "4.1.0",