eslint-plugin-react
's direct dependencies. Data on all dependencies, including transitive ones, is available via CSV download.Name | Version | Size | License | Type | Vulnerabilities |
---|---|---|---|---|---|
array-includes | 3.1.8 | 25.71 kB | MIT | prod | |
array.prototype.flatmap | 1.3.2 | 6.72 kB | MIT | prod | |
array.prototype.tosorted | 1.1.3 | 6.75 kB | MIT | prod | |
doctrine | 2.1.0 | 21.74 kB | Apache-2.0 | prod | |
es-iterator-helpers | 1.0.19 | 151.97 kB | MIT | prod | |
eslint | 8.57.0 | 2.9 MB | MIT | prod peer | |
estraverse | 5.3.0 | 7.86 kB | BSD-2-Clause | prod | |
jsx-ast-utils | 3.3.5 | 33.4 kB | MIT | prod | |
minimatch | 3.1.2 | 11.66 kB | ISC | prod | |
object.entries | 1.1.8 | 31.8 kB | MIT | prod | |
object.fromentries | 2.0.8 | 15.94 kB | MIT | prod | |
object.hasown | 1.1.4 | 16.04 kB | MIT | prod | |
object.values | 1.2.0 | 30.78 kB | MIT | prod | |
prop-types | 15.8.1 | 22.12 kB | MIT | prod | |
resolve | 2.0.0-next.5 | 24.78 kB | MIT | prod | |
semver | 6.3.1 | 18.65 kB | ISC | prod | |
string.prototype.matchall | 4.0.11 | 37.61 kB | MIT | prod |
The eslint-plugin-react is a highly beneficial tool for developers. It provides specific linting rules for ESLint pertaining to React, improving the efficiency and quality of their code. Essentially, linting rules act as a series of checks that help to spot programmatic and stylistic errors in your code. If any deviations from predefined coding standards are made, your ESLint tool will flag them. This allows you to avoid potential bugs before they become a problem.
To use the eslint-plugin-react, you first need to install it using Node package manager (npm). It can be installed locally, or globally, although the recommendation lies with local installation. You can use the following command to install it:
npm install eslint eslint-plugin-react --save-dev
Your ESLint configuration file helps to specify the rules that you'd like to enforce. The most straightforward way of using eslint-plugin-react is to extend the plugin's recommended configuration. This configures reasonable defaults for you. Add the following to your .eslintrc
file:
"extends": [
"eslint:recommended",
"plugin:react/recommended"
]
If you're not using a preset, you'll need to declare each rule and additional configuration individually:
{
"plugins": [
"react"
]
}
You also need to enable JSX support:
{
"parserOptions": {
"ecmaFeatures": {
"jsx": true
}
}
}
Then, enable the rules you want to use. For example:
"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
}
Some advanced configurations include setting shared settings across all plugin rules, enabling JSX in parser options, using the new JSX transform from React 17, and others as listed comprehensively within the package's readme documentation.
The official documentation and usage examples for the eslint-plugin-react package can be found on the project's GitHub page: https://github.com/jsx-eslint/eslint-plugin-react. The documentation includes detailed information about the installation process, configuration options, shareable configurations, and a list of supported rules.