How To Configure ESLint and Prettier

5 min readJun 12, 2021

In a web development world where speed and performance is everything. As a developer, you need to make sure you catching the errors early and writing scalable and maintainable code that follows certain coding standards and is easy to understand.

That’s why in this article we are gonna talk about the two most underrated things, Code Linting & Code formatting by setting up Eslint and Prettier.

ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code.
Prettier is a code formatter, that helps in following industry standard coding practices.

This is the second part of the article series where we will be setting up a production-grade React application from scratch.
In the last part, we did the setup for Webpack & babel. If you are someone who wants to understand how your React project work under the hood, check out this series where I have talked about setting up the React Ecosystem from scratch.
If at any point you feel like looking into the code, you can checkout the code from here.

Table of Content

Installing the dependencies
Configuring Eslint and Prettier
Optional — Installing Eslint and prettier Extensions for IDEs.
Running Eslint and Prettier.

Before installing the dependencies, I want you to add some buggy code to your index.js file, so you can visualize how Eslint helps you in catching errors early. Add the following code to index.js inside src folder.

if you look closely on line no 4 and line no 6 , the two variables handleButtonClick and someLocalProperty are not defined, and this will throw errors when you will run this code. We will come back to this later, how Eslint will help you catch these error before running your code. for now let’s continue in our setup.

Step 1 — Installing the dependencies

In Order for Eslint to work, we need to provide a certain set of rules. We will be eslint-config-airbnb for some predefined rules.

In order to install the Eslint run the following command —

npm i --save-dev eslint prettier eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks

Alternatively, if you have npm v5+, you can directly run the shorter version of the above command.

npx install-peerdeps --dev eslint-config-airbnb && npm i -D prettier

The above commands will add the following dependencies to your package.json file —

Step 2 — Configuring Eslint and prettier

In order to set up the Eslint and prettier we need to add the configuration for both of them.

Let’s create two files at the root level-

.eslintrc.js for Eslint configuration.
.prettierrc.js for Prettier configuration.

Note — both files names start with a .

if you have been following the React Ecosystem article series, then your folder structure will look something like this after adding these two files.

Next, let’s add the following Eslint configuration to .eslintrc.js file —

module.exports = {
  extends: [ // extenind pre-defined rules
    'airbnb', 
    'airbnb/hooks',
    'prettier',
    'plugin:prettier/recommended',
  ],
  plugins: ['prettier'], 
  rules: { // you can modify some rules manually
    'react/jsx-filename-extension': [
      1,
      {
        extensions: ['.js', '.jsx'],
      },
    ],
    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
    'react/jsx-props-no-spreading': [
      0,
      {
        html: 'ignore',
        custom: 'ignore',
        explicitSpread: 'ignore',
      },
    ],
    'prettier/prettier': 'error',
    'arrow-body-style': 'off',
    'prefer-arrow-callback': 'off',
  },
  globals: {
    window: true,
    document: true,
    localStorage: true,
    FormData: true,
    FileReader: true,
    Blob: true,
    navigator: true,
  },
};

extends — This helps in extending pre-defined rules from libs.

plugin — which third-party plugins define additional rules, environments, configs, etc. for ESLint to use.

rules — You can define, modify some rules here. You can turn on and off these rules based on your requirements. you can read more about configuring rules here.

globals — the additional global variables your script accesses during execution.

Next, let’s add some prettier configuration as well, add the following to to .prettierrc.js .

module.exports = {
"singleQuote": true,
"printWidth": 100,
"trailingComma": "es5",
"tabWidth": 2
}

singleQuote — throws an error on double-quotes. allows the use of single quote only.

printWidth — sets max line width can be 100 characters.

trainlingComma — line should end with a comma.

tabWidth — sets tabwidth to 2 characters.

Step 3 — Adding Eslint and prettier extensions

If you want a visual representation of errors in your IDE, you can install these two extensions. You can search for theseextensions inside your IDE. I am a huge fan of VS Code, so I will be setting it up with VS code only.

You can search for them in extensions section of your VS code IDE or install via these links —

Eslint — https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Prettier — https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

As soon as you add these extensions, your IDE will start showing the linting errors like this —

See now handleButtonClick and someLocalProperty shows an error.

You can hover over the error and you can see the exact problem with the code.

In order to fix this, you can click on quick fix, which will show you this —

you have three options here —

you can disable no-undefined eslint rule for this line.
you can disable no-undefined eslint rule for entire file.
Or you can see the documentation, it will take you to the official page, where you can read more about it.

Step 4- Running Eslint and Prettier

If you want to run this via the command line, you can add the following script to your package.json inside scripts .

"lint": "eslint --fix ."

and then run the following command from the terminal —

npm run lint

This will go through all the files and fix all auto-fixable problems.

And that’s it. Now you have Eslint and Prettier setup in your project.

Up Next in this series I will be talking about Unit Testing setup, checkout this article series for more info.