React specific linting rules for ESLint (evacuated from NSA/Microsoft github)
Yannick Croissant fee2d1a02f Fix crash in no-unused-prop-types when encountering mixed union and intersection flow types (fixes #1806) | 6 vuotta sitten | |
---|---|---|
docs | 6 vuotta sitten | |
lib | 6 vuotta sitten | |
tests | 6 vuotta sitten | |
.editorconfig | 10 vuotta sitten | |
.eslintignore | 7 vuotta sitten | |
.eslintrc | 7 vuotta sitten | |
.gitignore | 7 vuotta sitten | |
.npmrc | 7 vuotta sitten | |
.travis.yml | 6 vuotta sitten | |
CHANGELOG.md | 6 vuotta sitten | |
CONTRIBUTING.md | 7 vuotta sitten | |
LICENSE | 10 vuotta sitten | |
README.md | 6 vuotta sitten | |
appveyor.yml | 6 vuotta sitten | |
index.js | 6 vuotta sitten | |
package.json | 6 vuotta sitten |
React specific linting rules for ESLint
Install ESLint either locally or globally.
$ 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.
{
"settings": {
"react": {
"createClass": "createReactClass", // Regex for Component Factory to use,
// default to "createReactClass"
"pragma": "React", // Pragma to use, default to "React"
"version": "15.0", // React version, default to the latest React stable release
"flowVersion": "0.53" // Flow version
},
"propWrapperFunctions": [ "forbidExtraProps" ] // The names of any functions used to wrap the
// propTypes object, e.g. `forbidExtraProps`.
// If this isn't set, any propTypes wrapped in
// a function will be skipped.
}
}
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 componentDidMount
setState
in componentDidUpdate
this.state
findDOMNode
isMounted
shouldComponentUpdate
when extending React.PureComponentReact.render
setState
ref
attribute.this
in stateless functional componentssetState
in componentWillUpdate
React
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.