Create react app typescript: eslint and prettier

Take your typescript create-react-app to the next level with a nice code format.

If you follow these steps, you’ll have linting and prettier set up in less than 10 minutes.

I’m just setting up a project and thought it could be helpful for others to have a small guide with the main steps. Create-react-app is quite awesome to be honest and including some extra configuration can take it even further. I’ll be creating some posts covering nice features without ejecting.

As always, there is always room for improvement. I’m using the predefined configurations form airbnb, react-app and prettier in order to go faster. If you prefer to have your own rules go ahead.

Let’s cut to the chase!

Pre-requisite

As a first step, I’m going to install create react app with the typescript template.

npx create-react-app formatting-project --template typescript

It will take some time installing.

Step 1: Install dependencies

For linting:

npm i -D --save-exact eslint eslint-config-airbnb eslint-config-airbnb-typescript eslint-config-prettier eslint-config-react-app eslint-import-resolver-typescript eslint-loader eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks babel-eslint [@typescript](http://twitter.com/typescript)-eslint/parser [@typescript](http://twitter.com/typescript)-eslint/eslint-plugin

For prettier:

npm i -D --save-exact prettier prettier-eslint prettier-eslint-cli eslint-plugin-prettier

Step 2: create config files

All these files go on the root level.

.eslintrc

// .eslintrc
{
  "plugins": ["prettier"],
  "extends": ["airbnb-typescript", "react-app", "prettier"],
  "settings": {
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true
      }
    }
  },
  "rules": {
    "object-curly-spacing": ["warn", "always"],
    "no-unused-vars": [
      "warn",
      {
        "vars": "all",
        "args": "none"
      }
    ],
    "[@typescript](http://twitter.com/typescript)-eslint/no-unused-vars": [
      "warn",
      {
        "vars": "all",
        "args": "none"
      }
    ],
    "[@typescript](http://twitter.com/typescript)-eslint/no-explicit-any": [
      "error",
      {
        "ignoreRestArgs": true
      }
    ],
    "max-len": [
      "warn",
      {
        "code": 80,
        "ignoreStrings": true,
        "ignoreTemplateLiterals": true,
        "ignoreComments": true
      }
    ],
    "no-plusplus": [
      "error",
      {
        "allowForLoopAfterthoughts": true
      }
    ],
    "react/jsx-key": "error",
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": [
          "\*\*/\*.test.js",
          "\*\*/\*.test.jsx",
          "\*\*/\*.test.ts",
          "\*\*/\*.test.tsx",
          "src/tests/\*\*/\*"
        ]
      }
    ],
    "react/jsx-props-no-spreading": "off",
    "import/prefer-default-export": "off",
    "react/jsx-boolean-value": "off",
    "react/prop-types": "off",
    "react/no-unescaped-entities": "off",
    "react/jsx-one-expression-per-line": "off",
    "react/jsx-wrap-multilines": "off",
    "react/destructuring-assignment": "off",
  }
}

.eslintignore

// .eslintignore
build/\*
public/\*
src/react-app-env.d.ts
src/serviceWorker.ts

.prettierrc

{
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2
}

Step 3: Add the running scripts

Look for the scripts area in package.json and include these:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",  
    "format": "prettier --write src/\*\*/\*.{ts,tsx,scss,css,json}",  
    "isready": "npm run format && npm run lint && npm run build"**  
  },

The first one npm run lint will run the linting and tell you what is wrong. The second one npm run format will format all the code based on your prettier and linting configuration. At last, a script that is very useful to run before committing and pushing code to git.

Step 4: Lint and format your code

Once you start running the scripts you will start getting errors.

$ npm run lint
$ npm run format

Some of them you may want to ignore so here the way to do it:

/* eslint-disable no-console, no-param-reassign */ For one or multiple lines
/* eslint-disable-next-line no-console */ For next line

Bob’s your uncle!!

Improvements

As I commented previously, there is room for improvement. If you have any comments or suggestions please leave a comment below.

Comments

[Nils Strelow]

Hey nice setup.

Maybe remove the @typescript links in the code and npm install instructions