Creating a React App with Typescript with ESLint, Prettier

I know it’s pretty hard to get the perfect setup for the beginning of a project using React when you don’t know really well about the technology.

So I’m writing this article to help you and also me to know what you could install to start a project with React and Typescript to make everything easier to find and in the right folders.

So this is how I start…

First of all I run the create react-app command on my terminal using the template typescript that React provides for us

yarn create react-app my-app --template=typescript

Then I go into the project folder and open it using VS Code with the command

code .

Now with the project already open, I start deleting the following files:

• App.css
• App.test.tsx
• index.css
• logo.svg
• serviceWorker.ts
• favicon.ico
• logo192.png
• logo512.png
• manifest.json

I delete the CSS files because I like to use Styled Components, so I give a global style later on. So if you like CSS you can leave the files there.

Also remember to delete the imports of the files you deleted from the files that are in the project still.

EditorConfig

I like to keep everything with a pattern, so if I use single quote, I need to keep every quote with single quote, if I put semi-colon in the end of the line, I need to put in the end of every line, and here is where EditorConfig helps me, cause if I forget some of these things, it will adjust for me with the settings I gave to it.

To use it is very simple, you just need to add the VS Code extension for EditorConfig.

With the extension setup, you can right click on the project source and click on “Generate .editorconfig”

On the .editorconfig file you can paste the following code

root = true
[*]
end_of_line = lf
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

ESLint

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. (ESLint)

To install this dependency you just need to run the command. This dependency is installed as a DevDependency cause it doesn’t need to be on the project on the final build.

yarn add eslint -D

Now with the dependency installed, it needs to be initiated and adjusted.

I like to use the following configuration:

yarn eslint --init
? How would you like to use ESLint? 
  To check syntax only 
  To check syntax and find problems 
❯ To check syntax, find problems, and enforce code style
? What type of modules does your project use? (Use arrow keys)
❯ JavaScript modules (import/export) 
  CommonJS (require/exports) 
  None of these
? Which framework does your project use? 
❯ React 
  Vue.js 
  None of these
? Does your project use TypeScript? (y/N) 
y
? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Browser
 ◯ Node
? How would you like to define a style for your project? 
❯ Use a popular style guide 
  Answer questions about your style 
  Inspect your JavaScript file(s)
? Which style guide do you want to follow? (Use arrow keys)
❯ Airbnb: <https://github.com/airbnb/javascript> 
  Standard: <https://github.com/standard/standard> 
  Google: <https://github.com/google/eslint-config-google>
? What format do you want your config file to be in? 
  JavaScript 
  YAML 
❯ JSON
? The style guide "airbnb" requires eslint@^5.16.0 || ^6.8.0. You are currently using eslint@7.1.0.
  Do you want to downgrade? (Y/n) 
Y
? Would you like to install them now with npm? (Y/n) 
n

Now it will show every dependency that needs to be installed. Just run the following command with the right versions:

yarn add eslint-plugin-react@^7.19.0 @typescript-eslint/eslint-plugin@ˆ2.28.0 eslint-config-airbnb@latest eslint@^6.8.0 eslint-plugin-import@^2.20.1 eslint-plugin-jsx-a11y@^6.2.3 eslint-plugin-react-hooks@^2.5.0 @typescript-eslint/parser@latest -D

Now you need to create a file .eslintignore, for the folders and files that you don’t want the eslint to adjust.

In this file .eslintignore you put theses files and folders.

**/*.js
node_modules
build

As we are doing this project with typescript, it needs to be installed the import resolver to React understand typescript imports. Also a DevDependency

yarn add eslint-import-resolver-typescript -D

Prettier

Prettier takes your code and reprints it from scratch by taking the line length into account.

It removes all original styling and ensures that all outputted code conforms to a consistent style.(Prettier)

Everything we are doing so far it’s to make the code be as consistent as possible, and prettier really helps this to happen.

It also needs to be installed as a DevDependency with the following command:

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

Now with Eslint configured and prettier installed, you just need to paste the JSON bellow in the .eslint.json to make sure everything works well together

{
  "env": {
    "browser": true,
    "es6": true,
    "jest": true
  },
  "extends": [
    "plugin:react/recommended",
    "airbnb",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],
  "rules": {
    "react/jsx-props-no-spreading": "off",
    "prettier/prettier": "error",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }],
    "import/prefer-default-export": "off",
    "@typescript-eslint/explicit-function-return-type": [
      "error",
      {
        "allowExpressions": true
      }
    ],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never"
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}

And finally create a file prettier.config.js with these lines.

module.exports = {
  singleQuote: true,
  trailingComma: 'all',
  arrowParens: 'avoid',
};

Now to see this working, just copy the code bellow and put in the App.tsx and save to see all the rules being applied.

import React from "react";
const App: React.FC = () => {
  return <h1>Hello World</h1>
};
export default App