ESLint Plugin React

Introduction

Speaking of the ESLint plugin, it's a linting tool that frequently locates and corrects issues in JavaScript code, but the question is: Why to use it? Why is it great when my code runs just fine without eslint? Consider a scenario where you and your friends or coworkers are working on a group project or a personal project. As you work, biases may arise regarding the proper code syntax or its styling, and you may end up focusing on those issues. However, why not use a tool that will handle these issues for us so that we can just concentrate on problem-solving and developing the project?

For JavaScript code, the ESLint plugin has a comprehensive set of rules that cover stylistic decisions and shield against common errors. Your project will benefit from using ESLint alone, but you can also use ESLint plugins to add React-specific rules that will help you create high-quality React applications.

Installation

ESLint plugin can be installed in two ways.

Run the following command to add ESLint as a local devDependency to your React Project:

To install eslint globally you need to use the below command:

The only distinction is that for it to function properly, you must also install all necessary plugins globally when you install it.

ESLint plugin should be initialized with an ESLint configuration file after installation so that it can store the rules that need to be applied to your code:

How to Configure ESLint for React Projects?

ESLint plugin operates under a set of "rules". These guidelines support uniformity, best practices, and the detection of potential flaws in your code. ESLint plugin can be configured based on your use case. There are two configuration options for ESLint:

• Configuration Comments:
  These are embedded JavaScript comments that are used to configure individual files.
• Configuration File:
  JavaScript, JSON, and YAML files that contain information are used by ESLint to configure the entire directory.

In this configuration, we will use JSON format, specifically .eslintrc.json, to store our configurations. Alternatively, you can create the eslintConfig property in package.json, and store these configurations in that property.

Properties in .eslintrc.json:

extends and plugins: While "plugin" works as an extension to the ESLint plugin, which can perform a variety of functions, we can inherit its configuration by adding a file name to the extends property.

Add the following extends and plugin properties to our '.eslintrc.json' file:

You should note that we have added several plugins and we need to install them first, so run the command below to install them as devDependencies:

The import-plugin will assist us in locating typical issues encountered when importing and exporting. The jsx-a11y plugin will detect accessibility-related errors, and the react plugin is all about React's coding conventions. We need to tell eslint-plugin-react which version of React we are using, so let's add that information to our settings property. Rather than explicitly stating the version of React we are using, we will delegate this task to settings by using the keyword detect so that it will determine the version of React we are using from package.json.

Rules:

You can view all the rules that you can use at https://eslint.org/docs/rules/. Rules are used for configuring purposes. There are three different types of rules where the error level can be set.

• off or 0: It will disable the rule.
• warn or 1: The rule will activate as a warning as a result.
• error or 2: The rule will be activated as an error as a result.

Let us add a few rules to our configuration. You are free to add any additional rules from the list of all rules above.

env and parserOptions:

We will specify the environments we are working in in the env property. JavaScript options like JSX support and ecma version can be specified in parserOptions.

.eslintrc.json

Let us add some commands to our package last but not least. the scripts property of JSON to launch the ESLint plugin.

Even if your src/ folder contains multiple directories, the lint command will recursively go down through each one of them and run the ESLint plugin inside every file; If the ESLint plugin detects any issues that can be automatically fixed, the lint:fix command will carry out those fixes.

Step to run lint:

Type the following command into the terminal to start it.

Output:

Configuration (legacy: .eslintrc*)

You can use the following preset to get reasonable defaults :

Add plugin:react/jsx-runtime to extends in your eslint configuration if you're using React 17's new JSX transform to turn off the necessary rules. The settings that will be applied to all plugin rules should also be specified. Your ESLint plugin project configuration can be stored in a configuration file. Plugins with custom rules, shareable configurations, built-in rules, how you want them enforced, which files you want the rules to apply to, and more can all be included.

You will need to specify specific rules and add additional configurations if you do not use a preset.

React should be added to the plugin list.

Facilitate the support for JSX.

With eslint 2+

Turn on the rules you want to apply.

Shareable Configs

Recommended:

The recommended configuration for React is exported by this ESLint plugin. Use the extends property in your .eslintrc config file to enable this configuration:

Once extended, a configuration file can change all the options and inherit all the characteristics of another configuration file (including rules, plugins, and language options). There are consequently three configurations, as described below:

• Base config: the extended configuration.
• Derived config: The configuration that builds on the base configuration is a derived configuration.
• Resulting actual config: Actual configuration that is produced after combining the derived and base configurations.

The value of the extended property is either:

• a configuration-detailing string (either a path to a config file, the name of a shareable config, eslint:recommended, or eslint:all).
• a collection of strings where each new configuration builds upon the previous configurations.

All:

Additionally, this plugin exports a configuration that contains all of the available rules. This complements the eslint:all rule nicely.

Configuration (new: eslint.config.js)

Eslint plugin announced a new config system starting with version 8.21.0. The old system no longer uses.eslintrc*. The default configuration file name would be eslint.config.js. While only the new system would be supported in eslint v9, the legacy system (.eslintrc*) would still be supported in eslint v8.

The eslint CLI also began looking up eslint.config.js as of version 8.23.0. Therefore, you are completely prepared to use the new config system if your eslint value is >=8.23.0.

You might want to check out the official blog posts,

• https://eslint.org/blog/2022/08/new-config-system-part-1/
• https://eslint.org/blog/2022/08/new-config-system-part-2/
• https://eslint.org/blog/2022/08/new-config-system-part-3/

and other official docs.

Plugin:

A plugin object is the default export of the eslint-plugin-react.

Configuring shared settings:

Shared settings can be added to configuration files using the ESLint plugin. Every rule receives the settings object you add to a configuration object. Plugins typically namespace the settings they are interested in to prevent conflicts with other settings. To specify the data that should be shared across all of their rules, plugins can use settings. If you are adding custom rules and want them to have access to the same data, this might be helpful.

The settings.react object's schema would be the same as what is already mentioned above in the legacy config section.

Shareable configs:

There are 3 shareable configurations as well.

• eslint-plugin-react/configs/all
• eslint-plugin-react/configs/recommended
• eslint-plugin-react/configs/jsx-runtime

Include the .js extension if your eslint.config.js is ESM (for example, eslint-plugin-react/recommended.js). It should be noted that the extension for these imports must be omitted as of the upcoming semver-major.