![Meet Socket at BlackHat and DEF CON in Las Vegas](https://cdn.sanity.io/images/cgdhsj6q/production/4a3876139ffd3878bb3e7800a14cf4044245dca7-1080x834.jpg?w=400&fit=max&auto=format)
Security News
Meet Socket at BlackHat and DEF CON in Las Vegas
Come meet the Socket team at BlackHat and DEF CON! We're sponsoring some fun networking events and we would love to see you there.
eslint-plugin-react
Advanced tools
Package description
The eslint-plugin-react is a plugin for ESLint that provides linting utilities for React and JSX specific code. It helps developers adhere to best practices and avoid common pitfalls in React development.
JSX-specific rules
Enforces rules specific to JSX, such as ensuring that any variables used in JSX are defined and that React is in scope when using JSX.
"react/jsx-uses-react": "error", "react/jsx-uses-vars": "error"
Hooks rules
Provides rules that enforce the correct usage of React Hooks, such as ensuring that hooks are called in the same order on every render and that dependencies are specified correctly for useEffect.
"react-hooks/rules-of-hooks": "error", "react-hooks/exhaustive-deps": "warn"
Prop-types validation
Ensures that prop types are correctly defined and used within React components, helping to catch type-related bugs.
"react/prop-types": "error"
Component lifecycle
Warns about usage of deprecated methods in React component lifecycle, encouraging developers to update to newer APIs.
"react/no-deprecated": "warn"
Best practices
Encourages best practices by warning against common anti-patterns like using array indices as keys or mutating state directly.
"react/no-array-index-key": "warn", "react/no-direct-mutation-state": "error"
Similar to eslint-plugin-react, eslint-plugin-vue provides linting rules specific to Vue.js framework. It helps enforce Vue-specific best practices and coding standards.
This plugin is similar to eslint-plugin-react but for Angular applications. It contains rules that enforce best practices and conventions in AngularJS projects.
While not specific to React, eslint-plugin-jsx-a11y works well with eslint-plugin-react to enforce accessibility practices in JSX elements.
This plugin is designed for Preact (a fast 3kB alternative to React with the same ES6 API) and provides linting rules tailored to Preact codebases.
Changelog
[7.22.0] - 2020.12.29
jsx-key
]: added checkKeyMustBeforeSpread
option for new jsx transform ([#2835][] @morlay)jsx-newline
]: add new rule ([#2693][] @jzabala)jsx-no-constructed-context-values
]: add new rule which checks when the value passed to a Context Provider will cause needless rerenders ([#2763][] @dylanOshima)jsx-indent-props
]: add ignoreTernaryOperator
option ([#2846][] @SebastianZimmer)jsx-no-target-blank
]: Add warnOnSpreadAttributes
option ([#2855][] @michael-yx-wu)display-name
]/component detection: avoid a crash on anonymous components ([#2840][] @ljharb)prop-types
]: function in class that returns a component causes false warning in typescript ([#2843][] @SyMind)jsx-no-target-blank
]: avoid a crash with a non-string literal ([#2851][] @ljharb)jsx-no-script-url
]: avoid crash with boolean href
([#2871][] @ljharb, @AriPerkkio)no-typos
]: avoid crash with computed method name ([#2870][] @ljharb, @AriPerkkio)jsx-max-depth
]: avoid crash with childless jsx child ([#2869][] @ljharb, @AriPerkkio)jsx-wrap-multilines
]: fix crash with declaration
s that are on a new line after =
([#2875][] @ljharb)no-unknown-property
]: avoid crash with prop named with Object.prototype key ([#2879][] @ljharb, @AriPerkkio)prop-types
]: default argument does not count as props-types declaration ([#2877][] @golopot)jsx-props-no-multi-spaces
]: fix a false positive for beside comments ([#2878][] @golopot)jsx-no-undef
]: handle the TS parser combined with an invalid ecmaVersion ([#2882][] @ljharb)no-unused-prop-types
]: apply skipShapeProps
to exact types ([#2883][] @golopot)no-danger-with-children
]/[style-prop-object
]/[no-adjacent-inline-elements
]: add category, URL ([#2891][] @thofmann)no-unused-prop-types
]: Add new example to rule ([#2852][] @thehereward)prop-types
]: fix example ([#2881][] @technote-space)Readme
React specific linting rules for ESLint
Install ESLint either locally or globally. (Note that locally, per project, is strongly preferred)
$ npm install eslint --save-dev
If you installed ESLint
globally, you have to install React plugin globally too. Otherwise, install it locally.
$ npm install eslint-plugin-react --save-dev
Use our preset to get reasonable defaults:
"extends": [
"eslint:recommended",
"plugin:react/recommended"
]
You should also specify settings that will be shared across all the plugin rules. (More about eslint shared settings)
{
"settings": {
"react": {
"createClass": "createReactClass", // Regex for Component Factory to use,
// default to "createReactClass"
"pragma": "React", // Pragma to use, default to "React"
"fragment": "Fragment", // Fragment to use (may be a property of <pragma>), default to "Fragment"
"version": "detect", // React version. "detect" automatically picks the version you have installed.
// You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
// default to latest and warns if missing
// It will default to "detect" in the future
"flowVersion": "0.53" // Flow version
},
"propWrapperFunctions": [
// The names of any function used to wrap propTypes, e.g. `forbidExtraProps`. If this isn't set, any propTypes wrapped in a function will be skipped.
"forbidExtraProps",
{"property": "freeze", "object": "Object"},
{"property": "myFavoriteWrapper"}
],
"linkComponents": [
// Components used as alternatives to <a> for linking, eg. <Link to={ url } />
"Hyperlink",
{"name": "Link", "linkAttribute": "to"}
]
}
}
If you do not use a preset you will need to specify individual rules and add extra configuration.
Add "react" to the plugins section.
{
"plugins": [
"react"
]
}
Enable JSX support.
With ESLint 2+
{
"parserOptions": {
"ecmaFeatures": {
"jsx": true
}
}
}
Enable the rules that you would like to use.
"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
}
<br />
).key
props in iterators/collection literalsjavascript:
URLstarget="_blank"
attribute without rel="noreferrer"
This plugin exports a recommended
configuration that enforces React good practices.
To enable this configuration use the extends
property in your .eslintrc
config file:
{
"extends": ["eslint:recommended", "plugin:react/recommended"]
}
See ESLint documentation for more information about extending configuration files.
The rules enabled in this configuration are:
This plugin also exports an all
configuration that includes every available rule.
This pairs well with the eslint:all
rule.
{
"plugins": [
"react"
],
"extends": ["eslint:all", "plugin:react/all"]
}
Note: These configurations will import eslint-plugin-react
and enable JSX in parser options.
ESLint-plugin-React is licensed under the MIT License.
FAQs
React specific linting rules for ESLint
We found that eslint-plugin-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Come meet the Socket team at BlackHat and DEF CON! We're sponsoring some fun networking events and we would love to see you there.
Security News
Learn how Socket's 'Non-Existent Author' alert helps safeguard your dependencies by identifying npm packages published by deleted accounts. This is one of the fastest ways to determine if a package may be abandoned.
Security News
In July, the Python Software Foundation mounted a quick response to address a leaked GitHub token, elected new board members, and added more members to the team supporting PSF and PyPI infrastructure.