Setup ESLint for React with Prettier, pre-commit and VSCode

Maintaining a good coding convention and pattern in a project can be a challenging task. This gets harder as more and more developers work on the same codebase, and as your codebase gets larger this might start to slow your developers down and make working with the code harder. Ensuring everybody is using the same convention and formatting and making sure nobody is committing anything that doesn't match the convention can be a tedious task.

To solve this problem you can use any linting tool like ESLint along with other tools like Prettier to ensure all the developers in your team follow the same conventions and guidelines.

In this article, we are going to take a look at setting up ESLint for a React Project along with Prettier to format your code. We'll also integrate a pre-commit hook to make sure all the code is linted and formatted before it ends up in your repository. So let's get started.

Different Pieces

• ESLint - Listing, Enforcing Style Guide
• Prettier - Code Formatting
• VSCode - Formatting and Suggestions based on ESLint and Prettier
• Pre-Commit - Making sure code that's being committed is following guidelines and is formatted

ESLint

ESLint is a javascript tool that checks your code for potential errors and bad code practices. It helps you enforce a code standard and style guide in your codebase. You can add ESLint in any of your JavaScript Code. It's not only limited to React Projects. You can use it with Vue.js, Node.js, or even vanilla Javascript Projects. It's pluggable and highly configurable. ESLint supports multiple plugins and extensions to extend and enhance its functionality.

ESLint is so common and useful that some large organizations have released their own style guides based on ESLint. Some of them are

• Standard - https://www.npmjs.com/package/standard
• Airbnb - https://www.npmjs.com/package/eslint-config-airbnb
• Google - https://www.npmjs.com/package/eslint-config-google

If you have set up your React project with Create React App, it comes with a basic ESLint setup that will detect and report issues in your code. You can follow the steps below to take it further.

Setting up ESLint

ESLint has a handy CLI tool that can help you set it up. You have to initialize the ESLint with the CLI command. In the initial setup process, it will ask you questions about the Framework you're using, style-guide, import types, strictness, whether you're using it in the browser or on the Node.js server.

For our setup, we are going with the options selected below.

npx eslint --init

# Options we're going with here
# -- To check syntax, find problems, and enforce code style
# -- JavaScript modules (import/export)
# -- React
# -- n               --- Does your project use TypeScript?
# -- Browser
# -- Use a popular style guide
# ------ Standard
# -- JSON
# -- y               --- Install required packages

That will create a .eslintrc.json file and install all the required dependencies for your react application.

// .eslintrc.json
...
"extends": [
  "plugin:react/recommended",
  "standard",
],
"plugins": ["react"],
"env": {
  "browser": true
},
"settings": {
  "react": {
    "version": "detect"
  }
}
...

Configure Rules

There may be cases when you need to ignore some of the suggestions, or you might want to turn down the strictness of a particular rule in ESLint. This especially holds true if you have a large codebase where fixing all the issues raised by ESLint might take too much time. Fortunately, you can control each of the rules by changing the configuration in your .eslintrc.json file.

// .eslintrc.json
...
"rules": {
	...
	...
  "react/react-in-jsx-scope": 0
	...
	...
}
...

In the example above I have disabled the rule that requires you to import reactjs in case you have some JSX code in the file. (which is something you don't need to do in next.js)

npm scripts for linting and fixing the issues

You can create an npm command that will check for all the issues in all the files and give you a list of warnings. Additionally, you can have another script that will check and fix the issues as well wherever possible.

// package.json
...
{
	"scripts": {
		...
		"lint": "eslint ./",
		"lint-fix": "eslint ./ --fix",
		...
	}
}
...

Prettier

Prettier is a code formatter and it works with multiple languages. It integrates with most of the IDEs and Text Editors. Here we are going to configure it to work along with ESLint. This is important because the default configuration or your IDE/Editor might formate your code differently than you need it to for your selected ESLint configuration.

For that, we need both the ESLint config and and plugin for prettier.

Install the required dependencies

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

Then you need to tell your ESLint about your available plugins that it should work with which is prettier in this case. All you need to do is add the Prettier plugin option in your ESLint config.

// .eslintrc.json
...
"extends": [
  "plugin:react/recommended",
  "standard",
  "plugin:prettier/recommended"
],
"plugins": ["react"],
...

In some cases, you might also want to format all your files with one npm command. To do that you can add the following command in your package.json.

// package.json
...
{
	"scripts": {
		...
		"format": "prettier --write \"**/*.{js,jsx,json,md}\"",
		...
	}
}
...

Now running npm run format will format your .js, .jsx, .json and .md files based on your ESLint configuration.

VSCode Configuration

After configuring ESLint and Prettier you also need to configure your Text Editor or IDE to make sure it formats your code based on your configuration and you get code suggestions, error checking, and warning highlights from your ESLint configuration.

Here we are going to set-up VSCode to work with ESLint and Prettier for better code formatting and warnings. To make sure VSCode formats our code with the configuration we have provided using Prettier and ESLint we need to do the following setup.

1. Install ESLint and Prettier extension
2. Add the following snippet in settings.json of your VSCode

// settings.json
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true,
"eslint.alwaysShowStatus": true,

This will tell VSCode to format your SCSS, JSON, and JavaScript files with Prettier instead of VSCode's default formatter. This will also automatically format your code and fix the issues it can when you save the file.

Pre-commit and Pre-push

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

To implement this we need to configure some packages

• First package we need is husky which will make adding these hooks very easy.
• 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.
• pretty-quick will check for any unformatted files and format them using Prettier.

npm i -D husky lint-staged pretty-quick

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

// package.json

"lint-staged": {
    "*.js": "eslint"
},
"husky": {
	"hooks": {
		"pre-commit": "lint-staged && pretty-quick --staged"
	}
 }

As the name suggests, when you're trying to commit the changes, this will run both the commands lint-staged and pretty-quick. The lint-staged will run eslint command on javascript files that are staged, and the pretty-quick will format the JavaScript files if they aren't using Prettier. If any of the staged files are not properly linted or formatted this will give you a warning and will stop you from committing the changes in the code.

Final Config

Your package.json should look something like this now.

// package.json
...
"scripts": {
  "lint": "eslint ./",
  "lint-fix": "eslint ./ --fix",
	"format": "prettier --write \"**/*.{js,jsx,json,md}\""
},
"devDependencies": {
  "eslint": "^6.6.0",
  "eslint-config-prettier": "^6.11.0",
  "eslint-config-standard": "^14.1.1",
  "eslint-plugin-import": "^2.22.0",
  "eslint-plugin-node": "^11.1.0",
  "eslint-plugin-prettier": "^3.1.4",
  "eslint-plugin-promise": "^4.2.1",
  "eslint-plugin-react": "^7.20.3",
  "eslint-plugin-standard": "^4.0.1",
  "husky": "^4.2.5",
  "lint-staged": "^10.2.11",
  "prettier": "^2.0.5",
  "pretty-quick": "^2.0.1",
},
"lint-staged": {
    "*.js": "eslint"
},
"husky": {
  "hooks": {
    "pre-commit": "lint-staged && pretty-quick --staged"
  }
}
...

Here you go. Your codebase is now ready to work with ESLint and Prettier.

Even though we discussed mostly setting up ESLint for React, getting a good understanding of the concepts I coved will make setting up ESLint for Vue, Node.js or any JavaScript project will be easy for you. Integrating ESLint and Prettier in our workflow has helped us improve the code quality of our code and maintain a common style guide across the teams.

I hope you found this article useful and were able to add ESLint and Prettier for your React Projects. I would recommend you to go ahead and check out the documentation for each of these tools. You can also head out to documentation of each of the popular style-guides that I have mentioned to understand features and differences between them to know which one will suit your needs better.

ESLint: https://eslint.org/

Prettier: https://prettier.io/

Husky: https://www.npmjs.com/package/husky

- Jitendra Nirnejak