Setup ESLint and Prettier in Your React Project

ESLint Prettier

I love both ESLint and Prettier, and you will too, if you use it. If you have not used them in your projects, make sure to keep reading and get them setup in the next 5 minutes.

What is ESLint?

ESLint, is a JavaScript linter that can find and fix common problems in your code. This is a huge time saver, and an absolute necessity for all JavaScript developers. It does all the heavy lifting around coding standards for you, and you don’t have to worry about forgetting them. The first thing I do when I work on a JavaScript project, is make sure that ESLint is already setup within the project, and configure it, if it is already not.

Benefits of ESLint

  • Reduce human errors and doesn’t rely on developers to remember the code standards.
  • All the developers are on the same page with coding standards, and can read each other’s code.
  • Developers don’t have to spend time on code reviews, pointing out coding standard issues.
  • Big time saver and improves team’s velocity.

Install ESLint

First step is to install the eslint packages using npm.

npm install eslint --save-dev

or

yarn add eslint --dev

Once this is done, you should see the dependency added to your package.json file.

Configuration File

The next step is to setup the configuration file .eslintrc.json. We can do this automatically by running the following command. Make sure you already have a package.json file for your project before running this command.

npx eslint --init

While running this command you will see that you will be asked to answer a few questions. This helps in setting up the best lint rules for your project. Answer them according to your project needs. You can also chose a style guide. The popular ones are from Airbnb and Google. I like to use the standard style that comes out of the box.

ESLint can be used with TypeScript projects as well and the init command asks if TypeScript is used in the project while configuring the file.

eslint init

Once, the init is complete you will have a .eslintrc.json file in your root directory. The contents of the file looks something like below. Keep in mind, it will be different depending on the options you pick during ESLint init.

{ "env": { "browser": true, "es2021": true }, "extends": [ "plugin:react/recommended", "standard" ], "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": 12, "sourceType": "module" }, "plugins": [ "react" ], "rules": { }
}

Depending on the style guide you picked while initiating the config file, ESLint will have certain linting rules it will force you to follow. There are lots of custom configuration th at can be done based on what you want the linter to do. For all the details on custom configuration, make sure to read through the official documentation here: ESLint Configuration specifics

ESLint Rules

In the config file additionally, you can specify custom rules. ESLint, catches tons of errors out of the box. In addition, you can always add to this your specific rules. Once you decide on rules, you can pick which of these rules are treated as errors and which of these are warnings.

Errors break the build, and you are forced to fix the error, whereas warnings can be ignored and will not break the build. This is a subjective topic, and team has to be on board to pick rules that fit in the category of errors vs. warnings.

Here are the list of rules that come out of the box with the standard react/recommended plugin. I use this all the time, and it is inbuilt with all the rules for React best practices.

parserOptions

The parserOptions determines how the linter can parse your code.This is where you specify the ECMAScript version that your project is using like ES6, etc.. In our example config file, we have set the ecmaVersion key to 12. Additionally, we can also specify if modules are used, by setting the sourceType to module.

What is Prettier?

Once you have ESLint setup for linting, the next tool you will really like using is Prettier.  Prettier is a code formatter, and also a huge time saver. With Prettier, you just hit save and it formats the code for you. This also ensures that the entire team has the same code formatting rules. It supports many languages and several code editors.

If you are using VS Code, you can install the Prettier plugin, and enable the “format on save”, for auto formatting while you save as shown below:

Prettier Auto Save

Conclusion

I hope you enjoyed this article. See you again with more articles. If you liked this post, don’t forget to share it with your network. You can follow me on twitter @AdhithiRavi for more updates.

Adhithi Ravichandran is a Software Consultant based in Kansas City. She is currently working on building apps with React, React Native and GraphQL. She is a Conference Speaker, Pluralsight Author, Blogger and Software Consultant. She is passionate about teaching and thrives to contribute to the tech community with her courses, blog posts and speaking engagements.

Tags: ESLint, Prettier