How To Set Up ESLint, TypeScript, Prettier with Create React App

Note: CRA 3.0 will include TS linting with ESLint out of the box, https://github.com/facebook/create-react-app/issues/6475

I recently learned that TSLint was soon to be deprecated (cue sad violin music), but for very good reason as the JS/TS community starts to converge around a common set of core technologies. If you're interested in learning about these reason Palantir (creator of TSLint) has a nice read for you over here.

Alas the time had come for me to switch my small personal project to TypeScript. I've been a full time TypeScript dev for the past year and found that I miss it dearly even on smaller JavaScript projects. I used to opt for plain old JS to reduce complexity, but at this point my knowledge of TypeScript makes it fairly effortless to configure on even the simplest projects. Not to mention that the latest version of Create React App support TypeScript integration right out of the box!

I've set up TSLint quite a few times in the past, but knowing that ESLint was the future of TypeScript linting I decided to give it a go. Set up wasn't as straight forward as I would've hoped given that things are in quite a state of flux at the moment presented some challenges due to lack of documentation so I've decided to document here.

This article assumes you're using the latest version of CRA which comes with ESLint already out of the box.

First, let's install or devDependencies

npm i -D @types/react @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-config-react eslint-plugin-prettier prettier

Your devDependecies in package.json should now look like this,

  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^1.6.0",
    "@typescript-eslint/parser": "^1.6.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-config-react": "^1.1.7",
    "eslint-plugin-prettier": "^3.0.1",
    "prettier": "^1.16.4"
  }

Now create two files in your projects root (same level as your src folder).

.eslintignore
.eslintrc.json

You might see some tutorials use .yml or .js configurations and some tutorials might exclude an .eslintignore all together and use pattern matching in their node js scripts to exclude certain folders. All of these approaches are valid and it's really a matter of preference which one you decide to use.

In your .eslintrc.json add

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "env": {
    "browser": true,
    "jasmine": true,
    "jest": true
  },
  "rules": {
    "prettier/prettier": ["error", { "singleQuote": true }]
  },
  "settings": {
    "react": {
      "pragma": "React",
      "version": "detect"
    }
  },
  "parser": "@typescript-eslint/parser"
}

and in your .eslintignore add any paths you don't want linted. In my case, I want to exclude my tests folders and the service worker that is packaged with CRA

src/registerServiceWorker.js
src/**/__tests__/**

In your package.json file we're going to add a new scripts file that will allow us to run our linter. Next to your react start, build, and test scripts add

"lint:fix": "eslint './src/**/*.{ts,tsx}'",

our next step assuming we've built a brand new Create React App project is to create our first TypeScript file. Go ahead and rename App.js to App.tsx and run npm start in your terminal. CRA will detect this is a TypeScript project and automatically add a tsconfig.json file for you. Running npm run lint will now get you output of your linted code within your terminal window. If you're using VSCode install the ESLint extension to get in editor highlighting. Now open up your App.tsx file and it should look like this
[图片上传中...(image-8e2607-1572915049885-0)]
Hovering your mouse over the render method should reveal two ESLint errors specific to TypeScript.

Missing accessibility modifier on method definition render.eslint(@typescript-eslint/explicit-member-accessibility)
Missing return type on function.eslint(@typescript-eslint/explicit-function-return-type)

In editor highlighting will let you know if your code is violating the configured linter rules without having to explicitly run the lint script. If we want to disable these rules we can add

   "@typescript-eslint/explicit-member-accessibility": 0,
   "@typescript-eslint/explicit-function-return-type": 0,

to our rules configuration in eslintrc.json. This is where we can disable rules, enable new rules and customize the default configuration that we've extended. In some cases certain linting issues can be auto-corrected by appending --fix to npm run lint.

If using VSCode in your settings.json add the following to enable auto-fix on save,

  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],