Adding ESLint and Prettier to a React app

I continued working on a NodeChat project (I wrote about it in my previous post), and this time I decided to work on adding ESLint and Prettier to it.

Introduction

First of all let me briefly describe what ESLint and Prettier are.

ESLint is a linting utility for JavaScript. It checks your code for runtime errors (like misspelled variables) and makes sure that you follow certain rules. You can define rules manually, for example you can say that in this project everyone should use double quotes instead of single quotes, and if someone ever uses single quotes in that project, ESLint will show an error.

Prettier is a code formatter. You can create your own rules or use one of the many rules that are available and used by big companies. You can define rules to use spaces instead of tabs, put a semicolon at the end of each line, and if any of those rules are broken, prettier will fix it for you.

Setting up ESLint using npm

There are many ways to install and configure ESLint. 
1. Simple installation with an option to select base rules:

npm install --save-dev eslint
./node_modules/.bin/eslint —-init

You will be prompted to choose base rules and the rules file format.
On the screenshot below I chose to use a popular style guide, I chose to use Google’s style rules and use JSON as a format of a config file.

ESLint initialization

2. Option number two is to install rules and plugin using a command (I uaed this one)

npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

The command above installs eslint with airbnb rules and some additional plugins (for react and jsx).

Now you can configure eslint by editing .eslintrc.json file that was created in the root of your project’s directory.

Running ESLint

You can run ESLint to check all files in a specified directory or a single file using next command:

./node_modules/.bin/eslint --fix path_to_dir_or _file

ESLint will check your file(s) for errors and show a result similar to this:

User:NodeChat User$ ./node_modules/.bin/eslint src/chatPage/test.js
/Users/User/Documents/NodeChat/src/chatPage/test.js
3:13 error 'Push' is defined but never used no-unused-vars
3:23 error Absolute imports should come before relative imports import/imports-first
5:7 error 'ChatPage' is defined but never used no-unused-vars
8:67 error Must use destructuring state assignment react/destructuring-assignment
15:26 error Unused state field: 'greeting' react/no-unused-state
✖ 4problems (4 errors, 0 warnings)
3 errors and 0 warnings potentially fixable with the `--fix` option.

Here, ESLint found some issues it could potentially fix, and some it couldn’t resolve.

Inside the file .eslintrc.json you can define rules in JSON format. The example below shows my configurations.

{
"parser": "babel-eslint",
   "extends": [ "airbnb", "prettier", "prettier/react"],
   "plugins": [ "prettier"],
"rules": {
"prettier/prettier": ["error"],
"quotes": ["error", "double"],
"indent": ["error", "tab"]
}
}

Adding Prettier

Since we already configured ESLint, now we want to integrate it with Prettier.

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

The command above instals:

  1. Prettier
  2. ESLint configuration for prettier, so you can format code with Prettier using eslint --fix.
  3. ESLint plugin for prettier
  4. Prettier-eslint is a tool to format JavaScript using eslint
  5. prettier-eslint-cli is a command line interface tool for prettier (you don’t have to install it)
  6. prettier-stylelint is a tool to format CSS (if you only want to format JavaScript you don’t need to install it)

So now you can use eslint --fix path only prettier prettier-eslint --write path.

Formatting files with Prettier

I created a file test.js to test prettier and added a bunch of formatting issues (spaces, missing semicolons) and here is how prettier fixed them:

Formatting with Prettier

If you want to add own formatting rules, create a file .prettierrc.

Now inside the file we can define rules in JSON format:

{
"useTabs": true,
bracketSpacing: true,
semi: true
}

Here I am saying that we allow to use tabs, add spaces between braces { d = 23 } or something like that. semi:true making sure that prettier will add semicolons at the end of each line.

You can take a look at all the changes I made to NodeChat here, which includes configuration files, files with rules, and dependencies added to package.json.


Additionally you can add a custom command to check for errors the entire project. In package.js add a new script command:

"fix-code": "prettier-eslint --write 'src/**/*.{js,jsx}' "

Here fix-code is just a name of a method, that will fix all the issues in every .js or .jsx file inside /src/ direcrory. Run it using: npm run fix-code.


Some useful resources:

Docs on configuring ESLint.

List of ESLint rules.

You can find prettier-cli command here.