Originally published on My Blog

Along the coding journey, I have learned how a proper setup environment can boost your productivity, code readability, ability to retain code more consistently, and help you avoid any bugs. In other words, it improves your code’s quality.
ESLint is the most popular JavaScript checker I have encountered so far.

Basically, it is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. It analyzes your code quickly, finds any problems in your code, and even fixes them automatically.

In this article, we are going to explore four essential ESLint plugins you will need in your React setup. But before going any further, I need to be honest with you: I am not a friend of long educational journeys. That is because I have sometimes ended up in endless tutorial hell. I really hate that.

Instead, I have found that I am able to learn more when the things I am learning are more practical, concise, and short. Your brain is not able to digest and retain a lot of things, and if it does, it will be for a few hours or days. Those are my findings so far. I will write an article about this topic later.

You are certainly different than me, but according to scientists, our brains work in a similar way. Let's avoid that controversial subject and jump into what really matters.

ESLint for React

ESLint’s default parser and core rules only support the latest final ECMAScript standard. What does that mean? It means that you are not able to run it to check experimental features. However, thanks to the fact that ESLint allows us to increase its power through plugins, you can use custom parsers, for example. So you can use Babel’s parser (babel-eslint), which allows ESLint to run on source code that is transformed by Babel.

Install ESLint As Dev Dependency

npm install eslint --save-dev

# or

yarn add eslint --dev

The 4 ESLint Plugins Your React App Needs

As the title of this article suggests, the next four plugins are recommended for your React setup.
Note: All of these will require the ESLint package to be installed before installing them.

1. babel-eslint

Lint all valid Babel code with ESLint. But before saying anything about this plugin, please only use it if you are using types (Flow) or ECMAScript experimental features not supported in ESLint itself yet.
Now that you are informed, it is time to talk about it. babel-eslint allows you to lint all valid Babel code with ESLint. Basically, it is a parser that allows ESLint to run on source code that is transformed by Babel.

Install babel-eslint

npm install babel-eslint --save-dev
# or
yarn add babel-eslint -D

2. eslint-plugin-import

The aim of this plugin is to support the linting of ECMAScript 2015(ES6) and higher versions for import/export. Basically, it prevents issues with the misspelling of file paths and import names. It tries to make you have good habits with all that stuff about imports.

It has different rules for things like static analysis, helpful warnings, module systems, and a style guide.
Just to mention a few rules

• Ensure imports point to a file/module that can be resolved (no-unresolved).
• Ensure named imports correspond to a named export in the remote file (named).
• Ensure a default export is present, given a default import (default).
• Report potentially ambiguous parse goal (script vs. module) (unambiguous).
• Report CommonJS require calls and module.exports or exports.* (no-commonjs).
• Ensure named imports correspond to a named export in the remote file (named).
• Ensure a default export is present, given a default import (default).

To install it, just run this command:
npm install eslint-plugin-import --save-dev

3. eslint-plugin-jsx-a11y

This is a static AST checker for accessibility rules on JSX elements. In other words, its mission is to help you use the proper things on JSX that are related to accessibility matters. For instance:

• Ensure the autocomplete attribute is correct and suitable for the form field it is used with.
• Ensure that all elements that require alternative text have meaningful information.
• Ensure the autoFocus prop is not used on elements. Autofocusing elements can cause usability issues for sighted and non-sighted users.

Thanks to Ryan Florence for building this powerful runtime-analysis tool.

Install it

# npm
npm install eslint-plugin-jsx-a11y --save-dev
# yarn
yarn add eslint-plugin-jsx-a11y --dev

4. eslint-plugin-react-hooks

This now is my favorite on the list. To be frank, I didn't know it some months ago since React hooks were the new kids in the React ecosystem and I hadn't had enough time to catch on.
This plugin helps us to enforce the rules of hooks.

• Only call hooks at the top level
  You don't call hooks inside of loops, conditions, or nested functions. This lets you ensure that hooks are called in the same order each time a component is rendered.

• Only call hooks from React functions
  Don't call hooks from regular JavaScript functions. Ensure your hooks are called from React function components or from custom hooks.

However, don't panic. eslint-plugin-react-hooks will ensure the previous rules. Meanwhile, you can focus on your code.

Install it

# npm
npm install eslint-plugin-react-hooks --save-dev
# yarn
yarn add eslint-plugin-react-hooks --dev

Conclusion

Certainly, there are more plugins for React out there. The mission of all of them is to make our life as developers easier and make our code more consistent and readable. The aim of this article was to introduce my four favorites that you should use on your current or future React projects.

Thanks for reading! If this story turned out to be interesting, I’d really appreciate if you share it with your friends.

Feel free to reach me on my blog and Medium