How to Setup a Modern Front-End React Project : eslint, prettier, stylelint, husky, editorconfig, etc.

When starting a React Js project it is advisable to make it a Progressive Web App (PWA), instead of the regular create-react-app which doesn't have loads of features.

To install a React PWA project on your terminal or git bash, run the following script...

 npx create-react-app my-app-name --template cra-template-pwa

After that, we can start off with the project setups for our React PWA project

1. Configuring Editor Config

The first configuration we will do is the file .editorconfig, which 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.

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

A .editorconfig file will appear in your project structure.

Replace the file with the settings below:

# EditorConfig is awesome:

# top-most EditorConfig file
root = true

indent_style = space
indent_size = 2
end_of_line = crlf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = false

All set! Our .editorconfig file is ready.

2. Configuring ES Lint

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.

Let's install eslint with the command below:

npm install eslint --save-dev

With the installation done, enter the following command:

npx eslint --init

After it runs we will need to select these answers in our terminal for the configuration to be correct and complete.

>  Configuring the eslint function:

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

- To check syntax, find problems, and enforce style code.

>  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:

- Javascript modules

>  Selecting the framework used

In this step, we’ll select 

- React

>  Use of typescript

Select the option 

- No

>  Code targeting

Here we can select between browser (front-end) and Node (back-end). 

- The browser option is already selected, so just hit enter.

>  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 from. 

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:

airbnb standard

>  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


> ESLint asks if you would like to install the dependencies using npm. 

we select the option 

- YES. 

Installing dependencies with NPM

Open your ESLint config file, likely called .eslintrc

Your file name may vary, depending on the config format you chose. 

I recommend the JSON format.

There are few customizations we need to make in the .eslintrc file

In the “env”: section, add jest. Not adding jest will make ESLint error out on Jest-specific functions like describe and it:

  "env": {
    "browser": true,
    "es2021": true,
    "jest": true

In the “extends”: section, add “plugin:react/recommended”:

"extends": [

And now you are all set. If you try to run ESLint now, it will pass without errors.

If you don’t really want to always run the linter manually from the terminal, add the npm scripts that’ll run the linter:

Open the package.json file. In the “scripts” section, add the new ESLint scripts.

“scripts”: {
    ... (Previous script )
    // Add the below script below the previous script. 
    "lint": "eslint ./",
    "lint-fix": "eslint ./ --fix",

You can run these scripts with npm by calling:

npm run lint
npm run lint:fix

You should be all set on ESLint at this point. Right now it’s really easy to set up Git hooks using Husky.

3. Configuring ES Lint Ignore

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

** / *. js

4. Configuring ES Lint RC

Let's open the .eslintrc file and add the following settings

  "env": {
    "browser": true,
    "es2021": true,
    "jest": true
  "extends": [
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    "ecmaVersion": 12,
    "sourceType": "module"
  "plugins": ["react"],
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]

4. Configuring Prettier

Prettier is a code formatter and serves to make your code as beautiful and readable as possible. 

To install it, just use the command:

npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier

Creating the prettier configuration file

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

  "singleQuote": false

Let's create the file .prettierignore to add the ignored folder


Try setting the 


 in your .prettierrc file (inside the object)

If you are using a windows machine endOfLine can be "crlf" basing on your git configuration.

Or set

'prettier/prettier': [
    'endOfLine': 'auto',

Inside the rules object of the .eslintrc file.

4. Configuring .env File

Create a file .env where you will store and setup api keys or any environment based settings

After creating .env file

Then go to .gitingnore file and add this

# api keys

and if you have a yarn.lock file

# yarn lock file

5.  Adding Scripts in Package.json

Add the following scripts in your project to run the eslint and prettier to lint and format your code. 

Add these to the scripts in package.json

    "lint": "eslint ./",
    "lint-fix": "eslint ./ --fix",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\""

6.  Configuring JS Config

Create s file names jsconfig.json in the root directory of the project and paste the following code

  "compilerOptions": {
    "baseUrl": "src"
  "include": ["src"]

7.  Configuring Style Lint

On adding StyleLint to your project
1. Use npm to install stylelint and its standard configuration:

npm install --save-dev stylelint stylelint-config-standard

2. Create a .stylelintrc configuration file in the root of your project:

    "extends": "stylelint-config-standard",
    "rules": {
      "indentation": "tab",
      "number-leading-zero": null,
      "color-hex-case": ["lower", { "severity": "warning" }]

8.  Configuring Pre-Commit and Pre-Push

This is a pretty important step. This will ensure that before any developer in your team commits any code, the changes made by him are validated with ESLint, and the code is properly formatted.

We will need to configure some packages

1. The First package we need is husky which will make adding these hooks very easy.

2. We also need a package called lint-staged that will let us check only the pages which are changed. So, only the staged files are checked and the rest of the code remains untouched.

3. Pretty quick will check for any unformatted files and  format them using Prettier.

npm install --save-dev husky lint-staged pretty-quick

After installing these packages we need to add configuration for these in our package.json file

"devDependencies": {
 "lint-staged": {
    "*.js": "eslint"
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint-fix lint-staged && pretty-quick --staged",
      "pre-push": "npm run test:all"
  "test:all": "set CI=true && react-scripts test && npm run lint"

Most of the errors (90%) can be fixed by ESLint itself, so run ESLint with a fix flag:

npm run lint-fix

You should only have a handful of errors left, they should look like this:

1:8 error ‘React’ is defined but never used no-unused-vars
3:8 error ‘App’ is defined but never used no-unused-vars
5:1 error ‘it’ is not defined no-undefined

Go to those files and fix them manually by hovering over the error and selecting quick fix, and then disable for entire file

To fix these errors, we have to tell ESLint to take into account that our app is running on Create React App and that we are using Jest as a test runner.

Now we have Git hooks for commit and push actions.

Every time you run a Git commit, Husky will run a pre-commit script (“npm run lint-fix”) and will only let you commit your changes if validation passes. This functions in a similar fashion for Git pushes.

What if we want to run both test and lint scripts pre-commit and pre-push (or any other more complex script)?

Congratulations! Now you have Git hooks that will run your tests and lint your code automatically each time you commit your code.

Pretty handy, huh?

9.  Other Useful or Necessary Packages a Modern Frontend Project Needs


- A link to the official react PWA documentation.


- A link to the official Tailwind CSS documentation.

## npm i axios

- To Install Axios.

## npm i react-redux

- To Install React-Redux.

## npm i @reduxjs/toolkit

- ...

## npm i react-router-dom

- ...

And so on and so forth..... 😜

No comments:

Post a Comment