How To Configure ESLint and Prettier

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 & . 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 file, so you can visualize how helps you in catching errors early. Add the following code to inside folder.

if you look closely on and , the two variables and 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 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 —

React Ecosystem: Eslint Prettier setup

Step 2 — Configuring Eslint and prettier

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

Let’s create two files at the root level-

  • for Eslint configuration.
  • 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 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,
},
};

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

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

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

— the additional global variables your script accesses during execution.

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

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

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

— sets max line width can be 100 characters.

— line should end with a comma.

— 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 these 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 section of your VS code IDE or install via these links —

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

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 and 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 rule for this line.
  • you can disable no-undefined 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 inside .

"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 and setup in your project.

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

Photo by Vasily Koloda on Unsplash

A Passionate front-end developer