How To Set Up ESLint, TypeScript, Prettier with Create React App
Tags: react, eslint, typescript, prettier
Published: 2019-04-05 23:58:26

---
title: How To Set Up ESLint, TypeScript, Prettier with Create React App
published: true
description: Learn how to set up ESLint with TypeScript in Create React App
tags: ReactJS, ESLint, TypeScript, Prettier
---
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](https://medium.com/palantir/tslint-in-2019-1a144c2317a9 "TSLint in 2019").

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
```javascript
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,
```json
  "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
```json
{
  "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
```json
"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
![App tsx code](https://thepracticaldev.s3.amazonaws.com/i/pv59ia1mea1moau70pzy.png "App.tsx code")
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 
```json
   "@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,
```json
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],
```