DEV Community


Posted on • Originally published at Medium on


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!


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]( [@typescript](

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
  "plugins": ["prettier"],
  "extends": ["airbnb-typescript", "react-app", "prettier"],
  "settings": {
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true
  "rules": {
    "object-curly-spacing": ["warn", "always"],
    "no-unused-vars": [
        "vars": "all",
        "args": "none"
    "[@typescript](": [
        "vars": "all",
        "args": "none"
    "[@typescript](": [
        "ignoreRestArgs": true
    "max-len": [
        "code": 80,
        "ignoreStrings": true,
        "ignoreTemplateLiterals": true,
        "ignoreComments": true
    "no-plusplus": [
        "allowForLoopAfterthoughts": true
    "react/jsx-key": "error",
    "import/no-extraneous-dependencies": [
        "devDependencies": [
    "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


  "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!!


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

Top comments (1)

nstrelow profile image
Nils Strelow

Hey nice setup.

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

Top Posts from the React Ecosystem

1. Changes In The Official React Documentation

The former React Docs Beta has been officially released as the updated React documentation at after years of hard work and refinement. Check out the brand new React Docs: What’s New in the Updated React Docs

2. CRA's Time is Over

React developer team has removed create-react-app (CRA) from official documentation rendering it no longer the default setup method for new projects. The bulky setup, slow, and outdated nature of CRA led to its removal: create-react-app is officially dead

3. How to Fetch Articles for Your Portfolio

Integrate the articles of your profile into your personal portfolio with either React, Vue, or Next.js by following these simple steps. It outlines how to include frontend to pull the information and correctly utilizes the API: How to Fetch Your Articles for Your Portfolio with React