loading...
Cover image for Part 1: Configuring a ReactJS Typescript project with .editorconfig, Eslint e Prettier

Part 1: Configuring a ReactJS Typescript project with .editorconfig, Eslint e Prettier

aryclenio profile image Aryclenio Xavier Barros Updated on ・6 min read

In this article, we will see how to set up a Typescript template with eslint and prettier to speed up the setup of your front-end projects. Fingers ready? Let's get into code!!

Minimum requirements

To proceed with the creation of our template, we will need these programs installed on your PC:

Installing the Create React App

We will normally install the create-react-app, which is a bundler for a react application with integrated features such as jest (automated tests), webpack (javascript bundler ), babel (JS compiler/converter) and much more.

To install it globally, we use the command:

yarn global add create-react-app

Creating the react application in typescript

With the increasing use of typescript, create-react-app now has a functionality to create your bundle react only with typescript files. Let's create it with the command below:

# The name of our template will be react-ts-template
yarn create react-app react-ts-template --template typescript

After the end of compilation and creation, we will have the following structure:

Alt Text

Configuring .editorconfig

The first configuration we will do is the file .editorconfig, it is used to store settings between several editors. To create it in Visual Studio Code, we need to add the proper extension for this. In the VSCode extensions tab, search for Editorconfig and install the extension.

Alt Text

After installing the extension, we need to right click on the root of our project and select the option Generate .editorconfig, as in the image below:

Alt Text

A .editorconfig file will appear in your project structure. It already has the most common settings, however, you only need to add one configuration to it, the line break compatibility between Windows and Mac/Linux.

Open your .editorconfig file and add the line below:

Alt Text

All set! Our .editorconfig file is ready.

Configuring Eslint

ESLint is one of the well-known code linters, and they serve for all files to maintain a writing code pattern, indentation and spacing, forcing that your project does not have disparity between file formatting, which occurs mainly when several developers working on the same project.

The first configuration we will do is to exclude the default configuration of the eslint that comes with React. To do this, in the package.json file, delete the set of lines below:

Alt Text

That done, let's install eslint with the command below:

yarn add eslint -D

With the installation done, enter the following command:

yarn eslint --init

We will need to answer a few things for the configuration to be correct.

Configuring the eslint function

The first option is the configuration of the eslint function, we will select the last option:

Alt Text

Importing modules

The selection of the type of import that we will use will be the default of react, the import/export, therefore, we select the first option:

Alt Text

Selecting the framework used

In this step, we’ll select React:

Alt Text

Use of typescript

Select the option Yes

Alt Text

Code targeting

We can select between browser (front-end) and Node (back-end). The browser option is already selected, so just hit enter.

Alt Text

Style Guide

There are several code patterns used by several companies, and many of them create style patterns. This option is free for you to choose. The option that I use the most is the airbnb standard which standardizes the use of single quotes, file imports below packages, among other things. It can be selected below:

Alt Text

File format configs

Finally, we select the type of configuration file. We will use JSON, as it becomes easier to edit throughout the production of the project:

Alt Text

Installing dependencies with Yarn

ESLint asks if you would like to install the dependencies using npm. As we use yarn, we select the option NO and run the command below:

yarn add eslint-plugin-react@^7.19.0 @ typescript-eslint / eslint-plugin @ latest eslint-config-airbnb @ latest 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

We will also install the eslint module for importing typescript files with the command below:

yarn add eslint-import-resolver-typescript -D

Configuring .eslintignore

Let's create a file called .eslintignore and add the content below. It will prevent eslint from forcing styles in the /node_modules files, javascript files at the project root and in the typescript react env file.

/*.js
** / *. js
node_modules
build
/src/react-app-env.d.ts

Configuring .eslintrc.json

Let's open the file and add settings for the typescript. The first one is in extends, where we will insert the options:

"plugin: @ typescript-eslint / recommended",
"prettier / @ typescript-eslint",
"plugin: prettier / recommended"

In the plugins tab, we will add the options:

react-hooks,
"prettier"

In the rules tab we will insert the following options:

"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",
"import / extensions": [
    "error",
    "ignorePackages",
    {
      "ts": "never",
      "tsx": "never"
    }
  ]

Finally, we add the settings option below the rules with the settings below:

"settings": {
    "import / resolver": {
      "typescript": {}
    }
  }

Final file .eslintrc.json

{
  "env": {
    "browser": true,
    "es6": 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": {
    "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",
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never"
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}

Everithing ready! Our ESLint is properly configured.

Setting up prettier

The prettier is a code formatter and serves to make your code as beautiful and readable as possible. To install it, just use the command:

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

Creating the prettier configuration file

Let's create the file prettier.config.js at the root of our project and insert the following settings:

module.exports = {
  singleQuote: true, // Force using single quotes
  trailingComma: 'all', // Force the use of a comma at the end of objects
  arrowParens: 'avoid', // Force not using parentheses with single parameter functions.
}

Project configured! Shall we go to github?

We will create a template repository on github that will facilitate when, in the future, whe need a react project. Log-in to your github account and create a repository with the name of your choice. Insert the MIT license and gitignore NODE as shown in the image below:

Alt Text

Sending files

Upload the files to the repository, excluding the node_modules folder. It can be done either via the terminal, cloning the project, or via the github web interface.

Alt Text

Activating template

Finally, in the settings tab of github, check the Template Repository option:

Alt Text

ALL RIGHT! Our template is ready and can be used to create new repositories in the template tab. This project is on my github. Just use it here or create your own.

Thanks for reading!

Posted on by:

aryclenio profile

Aryclenio Xavier Barros

@aryclenio

I'm just a random Brazilian guy with a passion for development and learning things.

Discussion

markdown guide