Setup EsLint, Husky and Prettier with React to ensure code standards

In this guide we would be looking at What, Why and How of

1. ESlint
2. Prettier
3. Husky

What is ESLint?

ESLint is an open-source Javascript linting utility. It is frequently used to find problematic patterns or code that doesn’t adhere to certain style guidelines. ESLint is written using Node.js to provide a fast runtime environment and easy installation via npm.

With ESLint you can impose the coding standard using a certain set of standalone rules. Yes, you can turn those rules on and off. These rules are completely pluggable.

Why use ESLint?

JavaScript, being a dynamic and loosely-typed language, is especially prone to developer error. ESLint lets you put guidelines over coding standard and helps you to minimize those errors. The main reason for imposing those guide is because every developer has his/her style of writing (like naming conventions/tabs/single or double quotes for a string). And, with different styling techniques, your codebase may look weird, more error-prone and vulnerable. Especially when you’re dealing with Javascript this could cause pitfalls you’d never want to deal with.

What is Prettier?

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Why use Prettier?

By far the biggest reason for adopting Prettier is to stop all the on-going debates over styles. It is generally accepted that having a common style guide is valuable for a project and team but getting there is a very painful and unrewarding process. People get very emotional around particular ways of writing code and nobody likes spending time writing and receiving nits.

So why choose the “Prettier style guide” over any other random style guide? Because Prettier is the only “style guide” that is fully automatic.

What is Husky?

Husky is a tool that allows us to easily wrangle Git hooks and run the scripts we want at those stages.

Why use Husky?

Husky works by including an object right within our package.json file that configures it to run the scripts we specify. After that, Husky handles managing at which point in the Git lifecycle our scripts will run.

How to combine and use ESlint, Prettier and Husky?

NOTE: For this tutorial we will not be installing the packages individually and using them and finally combining it, rather we would be doing things in block.

In your project package.json file, add the following pacakges under devDependencies object :

"devDependencies": {
    "eslint": "7.32.0",
    "eslint-config-airbnb": "19.0.0",
    "eslint-config-prettier": "8.3.0",
    "eslint-plugin-import": "2.25.3",
    "eslint-plugin-jsx-a11y": "6.5.1",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-plugin-react": "7.27.0",
    "eslint-plugin-react-hooks": "4.3.0",
    "husky": "^7.0.0",
    "prettier": "2.4.1"
}

Post adding the object run npm install --only=dev to install all the packages that were added.

From the root of the project directory create .eslintrc.json file add the following rules in it.

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": ["plugin:react/recommended", "airbnb", "plugin:prettier/recommended"],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": ["react"],
    "rules": {
        "react/react-in-jsx-scope": "off",
        "react/prop-types": "off",
        "react/no-unescaped-entities": "off",
        "react/no-array-index-key": "off",
        "react/jsx-no-constructed-context-values" : "off",
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
        "react/function-component-definition": [
            2,
            {
                "namedComponents": "arrow-function",
                "unnamedComponents": "arrow-function"
            }
        ]
    }
}

From the root of the project directory create .prettierrc file add the following rules in it.

{
    "semi": true,
    "tabWidth": 4,
    "printWidth": 100,
    "singleQuote": true,
    "trailingComma": "none",
    "endOfLine":"auto"
}

From the shell, Run the below commands in sequence

npm set-script lint "eslint src"

The above command would add a new script which can be used to check for linting errors. We would mostly source the src folder as that is where all the codes reside in all most all the projects. If you wish to source a different folder, update the command accordingly.

npm run lint

You can invoke the lint script by executing the above command

npm set-script lint:fix "prettier --write './src/**/*.{js,jsx,css,json}' --config ./.prettierrc && eslint --fix src"

The above command would add a new script which can be used to fix most of the linting errors by using prettier with our styling guide. We would mostly source the src folder as that is where all the codes reside in all most all the projects. If you wish to source a different folder and different file extenstions, update the command accordingly. You can invoke the prettier script by running

npm run lint:fix

So far we have enabled liniting and prettier for the project with standard guidelines. To undersand more about the keys and values that have been used in the above 2 stages, heade over to official documentaion of Eslint and Prettier to understand about the same.

Now let us configure husky for the project :

npm set-script prepare "husky install"

and followed by

npm run prepare

which would create a .husky folder in the root of the project and add additional script under scripts section of package.json file.

Add a hook:

We would like for our codes to be completely checked for standards before we do a git commit. So using the pre-commit hook we shall achieve it.

npx husky add .husky/pre-commit "npm run lint:fix"

We are now all set. Now before you push your code, husky would format the files with the set code styles for you.

NOTE: This docs works perfectly with React versions of 16 and 17