@hypnosphi/eslint-plugin-react
Advanced tools
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"
"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",
}
displayName in a React component definitionkey propssetState in componentDidMountsetState in componentDidUpdatethis.statefindDOMNodeisMountedshouldComponentUpdate when extending React.PureComponentReact.rendersetStateref attribute.this in stateless functional componentssetState in componentWillUpdateReact when using JSXshouldComponentUpdate method<img />, <br />) from receiving children.bind() and arrow functions in JSX propstarget='_blank'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.
[7.14.3] - 2019-07-23
prop-types][] to ignore validation when Flow indexers are used ([#2330][] @yannickcr)memo and forwardRef are used together ([#2349][] @yannickcr)FAQs
React specific linting rules for ESLint
The npm package @hypnosphi/eslint-plugin-react receives a total of 1 weekly downloads. As such, @hypnosphi/eslint-plugin-react popularity was classified as not popular.
We found that @hypnosphi/eslint-plugin-react demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
Elastic’s return to open source with the AGPL license has been met with skepticism, as many developers see it as a strategic move rather than a genuine effort to restore user trust and freedoms.
Security News
A new "revival hijack" supply chain attack targets deleted Python packages, with an estimated 22K packages at risk. Socket can detect and block hijacked packages that have added malicious code.
Product
We're introducing a new Analytics feature in the Socket dashboard so you can view changes in your organization's and repositories' alerts over time.