1ESLint-plugin-React 2=================== 3 4[![Maintenance Status][status-image]][status-url] [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][deps-image]][deps-url] [![Coverage Status][coverage-image]][coverage-url] [![Code Climate][climate-image]][climate-url] [![Tidelift][tidelift-image]][tidelift-url] 5 6React specific linting rules for ESLint 7 8# Installation 9 10Install [ESLint](https://www.github.com/eslint/eslint) either locally or globally. (Note that locally, per project, is strongly preferred) 11 12```sh 13$ npm install eslint --save-dev 14``` 15 16If you installed `ESLint` globally, you have to install React plugin globally too. Otherwise, install it locally. 17 18```sh 19$ npm install eslint-plugin-react --save-dev 20``` 21 22# Configuration 23 24Use [our preset](#recommended) to get reasonable defaults: 25 26```json 27 "extends": [ 28 "eslint:recommended", 29 "plugin:react/recommended" 30 ] 31``` 32 33You should also specify settings that will be shared across all the plugin rules. ([More about eslint shared settings](https://eslint.org/docs/user-guide/configuring#adding-shared-settings)) 34 35```json5 36{ 37 "settings": { 38 "react": { 39 "createClass": "createReactClass", // Regex for Component Factory to use, 40 // default to "createReactClass" 41 "pragma": "React", // Pragma to use, default to "React" 42 "fragment": "Fragment", // Fragment to use (may be a property of <pragma>), default to "Fragment" 43 "version": "detect", // React version. "detect" automatically picks the version you have installed. 44 // You can also use `16.0`, `16.3`, etc, if you want to override the detected value. 45 // default to latest and warns if missing 46 // It will default to "detect" in the future 47 "flowVersion": "0.53" // Flow version 48 }, 49 "propWrapperFunctions": [ 50 // 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. 51 "forbidExtraProps", 52 {"property": "freeze", "object": "Object"}, 53 {"property": "myFavoriteWrapper"} 54 ], 55 "linkComponents": [ 56 // Components used as alternatives to <a> for linking, eg. <Link to={ url } /> 57 "Hyperlink", 58 {"name": "Link", "linkAttribute": "to"} 59 ] 60 } 61} 62``` 63 64If you do not use a preset you will need to specify individual rules and add extra configuration. 65 66Add "react" to the plugins section. 67 68```json 69{ 70 "plugins": [ 71 "react" 72 ] 73} 74``` 75 76Enable JSX support. 77 78With ESLint 2+ 79 80```json 81{ 82 "parserOptions": { 83 "ecmaFeatures": { 84 "jsx": true 85 } 86 } 87} 88``` 89 90Enable the rules that you would like to use. 91 92```json 93 "rules": { 94 "react/jsx-uses-react": "error", 95 "react/jsx-uses-vars": "error", 96 } 97``` 98 99# List of supported rules 100 101<!-- AUTO-GENERATED-CONTENT:START (BASIC_RULES) --> 102* [react/boolean-prop-naming](docs/rules/boolean-prop-naming.md): Enforces consistent naming for boolean props 103* [react/button-has-type](docs/rules/button-has-type.md): Forbid "button" element without an explicit "type" attribute 104* [react/default-props-match-prop-types](docs/rules/default-props-match-prop-types.md): Enforce all defaultProps are defined and not "required" in propTypes. 105* [react/destructuring-assignment](docs/rules/destructuring-assignment.md): Enforce consistent usage of destructuring assignment of props, state, and context 106* [react/display-name](docs/rules/display-name.md): Prevent missing displayName in a React component definition 107* [react/forbid-component-props](docs/rules/forbid-component-props.md): Forbid certain props on components 108* [react/forbid-dom-props](docs/rules/forbid-dom-props.md): Forbid certain props on DOM Nodes 109* [react/forbid-elements](docs/rules/forbid-elements.md): Forbid certain elements 110* [react/forbid-foreign-prop-types](docs/rules/forbid-foreign-prop-types.md): Forbid using another component's propTypes 111* [react/forbid-prop-types](docs/rules/forbid-prop-types.md): Forbid certain propTypes 112* [react/function-component-definition](docs/rules/function-component-definition.md): Standardize the way function component get defined (fixable) 113* [react/no-access-state-in-setstate](docs/rules/no-access-state-in-setstate.md): Reports when this.state is accessed within setState 114* [react/no-adjacent-inline-elements](docs/rules/no-adjacent-inline-elements.md): Prevent adjacent inline elements not separated by whitespace. 115* [react/no-array-index-key](docs/rules/no-array-index-key.md): Prevent usage of Array index in keys 116* [react/no-children-prop](docs/rules/no-children-prop.md): Prevent passing of children as props. 117* [react/no-danger](docs/rules/no-danger.md): Prevent usage of dangerous JSX props 118* [react/no-danger-with-children](docs/rules/no-danger-with-children.md): Report when a DOM element is using both children and dangerouslySetInnerHTML 119* [react/no-deprecated](docs/rules/no-deprecated.md): Prevent usage of deprecated methods 120* [react/no-did-mount-set-state](docs/rules/no-did-mount-set-state.md): Prevent usage of setState in componentDidMount 121* [react/no-did-update-set-state](docs/rules/no-did-update-set-state.md): Prevent usage of setState in componentDidUpdate 122* [react/no-direct-mutation-state](docs/rules/no-direct-mutation-state.md): Prevent direct mutation of this.state 123* [react/no-find-dom-node](docs/rules/no-find-dom-node.md): Prevent usage of findDOMNode 124* [react/no-is-mounted](docs/rules/no-is-mounted.md): Prevent usage of isMounted 125* [react/no-multi-comp](docs/rules/no-multi-comp.md): Prevent multiple component definition per file 126* [react/no-redundant-should-component-update](docs/rules/no-redundant-should-component-update.md): Flag shouldComponentUpdate when extending PureComponent 127* [react/no-render-return-value](docs/rules/no-render-return-value.md): Prevent usage of the return value of React.render 128* [react/no-set-state](docs/rules/no-set-state.md): Prevent usage of setState 129* [react/no-string-refs](docs/rules/no-string-refs.md): Prevent string definitions for references and prevent referencing this.refs 130* [react/no-this-in-sfc](docs/rules/no-this-in-sfc.md): Report "this" being used in stateless components 131* [react/no-typos](docs/rules/no-typos.md): Prevent common typos 132* [react/no-unescaped-entities](docs/rules/no-unescaped-entities.md): Detect unescaped HTML entities, which might represent malformed tags 133* [react/no-unknown-property](docs/rules/no-unknown-property.md): Prevent usage of unknown DOM property (fixable) 134* [react/no-unsafe](docs/rules/no-unsafe.md): Prevent usage of unsafe lifecycle methods 135* [react/no-unused-prop-types](docs/rules/no-unused-prop-types.md): Prevent definitions of unused prop types 136* [react/no-unused-state](docs/rules/no-unused-state.md): Prevent definition of unused state fields 137* [react/no-will-update-set-state](docs/rules/no-will-update-set-state.md): Prevent usage of setState in componentWillUpdate 138* [react/prefer-es6-class](docs/rules/prefer-es6-class.md): Enforce ES5 or ES6 class for React Components 139* [react/prefer-read-only-props](docs/rules/prefer-read-only-props.md): Require read-only props. (fixable) 140* [react/prefer-stateless-function](docs/rules/prefer-stateless-function.md): Enforce stateless components to be written as a pure function 141* [react/prop-types](docs/rules/prop-types.md): Prevent missing props validation in a React component definition 142* [react/react-in-jsx-scope](docs/rules/react-in-jsx-scope.md): Prevent missing React when using JSX 143* [react/require-default-props](docs/rules/require-default-props.md): Enforce a defaultProps definition for every prop that is not a required prop. 144* [react/require-optimization](docs/rules/require-optimization.md): Enforce React components to have a shouldComponentUpdate method 145* [react/require-render-return](docs/rules/require-render-return.md): Enforce ES5 or ES6 class for returning value in render function 146* [react/self-closing-comp](docs/rules/self-closing-comp.md): Prevent extra closing tags for components without children (fixable) 147* [react/sort-comp](docs/rules/sort-comp.md): Enforce component methods order 148* [react/sort-prop-types](docs/rules/sort-prop-types.md): Enforce propTypes declarations alphabetical sorting 149* [react/state-in-constructor](docs/rules/state-in-constructor.md): State initialization in an ES6 class component should be in a constructor 150* [react/static-property-placement](docs/rules/static-property-placement.md): Defines where React component static properties should be positioned. 151* [react/style-prop-object](docs/rules/style-prop-object.md): Enforce style prop value is an object 152* [react/void-dom-elements-no-children](docs/rules/void-dom-elements-no-children.md): Prevent passing of children to void DOM elements (e.g. `<br />`). 153<!-- AUTO-GENERATED-CONTENT:END --> 154 155## JSX-specific rules 156 157<!-- AUTO-GENERATED-CONTENT:START (JSX_RULES) --> 158* [react/jsx-boolean-value](docs/rules/jsx-boolean-value.md): Enforce boolean attributes notation in JSX (fixable) 159* [react/jsx-child-element-spacing](docs/rules/jsx-child-element-spacing.md): Ensures inline tags are not rendered without spaces between them 160* [react/jsx-closing-bracket-location](docs/rules/jsx-closing-bracket-location.md): Validate closing bracket location in JSX (fixable) 161* [react/jsx-closing-tag-location](docs/rules/jsx-closing-tag-location.md): Validate closing tag location for multiline JSX (fixable) 162* [react/jsx-curly-brace-presence](docs/rules/jsx-curly-brace-presence.md): Disallow unnecessary JSX expressions when literals alone are sufficient or enfore JSX expressions on literals in JSX children or attributes (fixable) 163* [react/jsx-curly-newline](docs/rules/jsx-curly-newline.md): Enforce consistent line breaks inside jsx curly (fixable) 164* [react/jsx-curly-spacing](docs/rules/jsx-curly-spacing.md): Enforce or disallow spaces inside of curly braces in JSX attributes (fixable) 165* [react/jsx-equals-spacing](docs/rules/jsx-equals-spacing.md): Disallow or enforce spaces around equal signs in JSX attributes (fixable) 166* [react/jsx-filename-extension](docs/rules/jsx-filename-extension.md): Restrict file extensions that may contain JSX 167* [react/jsx-first-prop-new-line](docs/rules/jsx-first-prop-new-line.md): Ensure proper position of the first property in JSX (fixable) 168* [react/jsx-fragments](docs/rules/jsx-fragments.md): Enforce shorthand or standard form for React fragments (fixable) 169* [react/jsx-handler-names](docs/rules/jsx-handler-names.md): Enforce event handler naming conventions in JSX 170* [react/jsx-indent](docs/rules/jsx-indent.md): Validate JSX indentation (fixable) 171* [react/jsx-indent-props](docs/rules/jsx-indent-props.md): Validate props indentation in JSX (fixable) 172* [react/jsx-key](docs/rules/jsx-key.md): Report missing `key` props in iterators/collection literals 173* [react/jsx-max-depth](docs/rules/jsx-max-depth.md): Validate JSX maximum depth 174* [react/jsx-max-props-per-line](docs/rules/jsx-max-props-per-line.md): Limit maximum of props on a single line in JSX (fixable) 175* [react/jsx-no-bind](docs/rules/jsx-no-bind.md): Prevents usage of Function.prototype.bind and arrow functions in React component props 176* [react/jsx-no-comment-textnodes](docs/rules/jsx-no-comment-textnodes.md): Comments inside children section of tag should be placed inside braces 177* [react/jsx-no-duplicate-props](docs/rules/jsx-no-duplicate-props.md): Enforce no duplicate props 178* [react/jsx-no-literals](docs/rules/jsx-no-literals.md): Prevent using string literals in React component definition 179* [react/jsx-no-script-url](docs/rules/jsx-no-script-url.md): Forbid `javascript:` URLs 180* [react/jsx-no-target-blank](docs/rules/jsx-no-target-blank.md): Forbid `target="_blank"` attribute without `rel="noreferrer"` 181* [react/jsx-no-undef](docs/rules/jsx-no-undef.md): Disallow undeclared variables in JSX 182* [react/jsx-no-useless-fragment](docs/rules/jsx-no-useless-fragment.md): Disallow unnecessary fragments (fixable) 183* [react/jsx-one-expression-per-line](docs/rules/jsx-one-expression-per-line.md): Limit to one expression per line in JSX (fixable) 184* [react/jsx-pascal-case](docs/rules/jsx-pascal-case.md): Enforce PascalCase for user-defined JSX components 185* [react/jsx-props-no-multi-spaces](docs/rules/jsx-props-no-multi-spaces.md): Disallow multiple spaces between inline JSX props (fixable) 186* [react/jsx-props-no-spreading](docs/rules/jsx-props-no-spreading.md): Prevent JSX prop spreading 187* [react/jsx-sort-default-props](docs/rules/jsx-sort-default-props.md): Enforce default props alphabetical sorting 188* [react/jsx-sort-props](docs/rules/jsx-sort-props.md): Enforce props alphabetical sorting (fixable) 189* [react/jsx-space-before-closing](docs/rules/jsx-space-before-closing.md): Validate spacing before closing bracket in JSX (fixable) 190* [react/jsx-tag-spacing](docs/rules/jsx-tag-spacing.md): Validate whitespace in and around the JSX opening and closing brackets (fixable) 191* [react/jsx-uses-react](docs/rules/jsx-uses-react.md): Prevent React to be marked as unused 192* [react/jsx-uses-vars](docs/rules/jsx-uses-vars.md): Prevent variables used in JSX to be marked as unused 193* [react/jsx-wrap-multilines](docs/rules/jsx-wrap-multilines.md): Prevent missing parentheses around multilines JSX (fixable) 194<!-- AUTO-GENERATED-CONTENT:END --> 195 196## Other useful plugins 197 198- Rules of Hooks: [eslint-plugin-react-hooks](https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks) 199- JSX accessibility: [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) 200- React Native: [eslint-plugin-react-native](https://github.com/Intellicode/eslint-plugin-react-native) 201 202# Shareable configurations 203 204## Recommended 205 206This plugin exports a `recommended` configuration that enforces React good practices. 207 208To enable this configuration use the `extends` property in your `.eslintrc` config file: 209 210```json 211{ 212 "extends": ["eslint:recommended", "plugin:react/recommended"] 213} 214``` 215 216See [ESLint documentation](http://eslint.org/docs/user-guide/configuring#extending-configuration-files) for more information about extending configuration files. 217 218The rules enabled in this configuration are: 219 220* [react/display-name](docs/rules/display-name.md) 221* [react/jsx-key](docs/rules/jsx-key.md) 222* [react/jsx-no-comment-textnodes](docs/rules/jsx-no-comment-textnodes.md) 223* [react/jsx-no-duplicate-props](docs/rules/jsx-no-duplicate-props.md) 224* [react/jsx-no-target-blank](docs/rules/jsx-no-target-blank.md) 225* [react/jsx-no-undef](docs/rules/jsx-no-undef.md) 226* [react/jsx-uses-react](docs/rules/jsx-uses-react.md) 227* [react/jsx-uses-vars](docs/rules/jsx-uses-vars.md) 228* [react/no-children-prop](docs/rules/no-children-prop.md) 229* [react/no-danger-with-children](docs/rules/no-danger-with-children.md) 230* [react/no-deprecated](docs/rules/no-deprecated.md) 231* [react/no-direct-mutation-state](docs/rules/no-direct-mutation-state.md) 232* [react/no-find-dom-node](docs/rules/no-find-dom-node.md) 233* [react/no-is-mounted](docs/rules/no-is-mounted.md) 234* [react/no-render-return-value](docs/rules/no-render-return-value.md) 235* [react/no-string-refs](docs/rules/no-string-refs.md) 236* [react/no-unescaped-entities](docs/rules/no-unescaped-entities.md) 237* [react/no-unknown-property](docs/rules/no-unknown-property.md) 238* [react/prop-types](docs/rules/prop-types.md) 239* [react/react-in-jsx-scope](docs/rules/react-in-jsx-scope.md) 240* [react/require-render-return](docs/rules/require-render-return.md) 241 242## All 243 244This plugin also exports an `all` configuration that includes every available rule. 245This pairs well with the `eslint:all` rule. 246 247```json 248{ 249 "plugins": [ 250 "react" 251 ], 252 "extends": ["eslint:all", "plugin:react/all"] 253} 254``` 255 256**Note**: These configurations will import `eslint-plugin-react` and enable JSX in [parser options](http://eslint.org/docs/user-guide/configuring#specifying-parser-options). 257 258# License 259 260ESLint-plugin-React is licensed under the [MIT License](http://www.opensource.org/licenses/mit-license.php). 261 262 263[npm-url]: https://npmjs.org/package/eslint-plugin-react 264[npm-image]: https://img.shields.io/npm/v/eslint-plugin-react.svg 265 266[travis-url]: https://travis-ci.org/yannickcr/eslint-plugin-react 267[travis-image]: https://img.shields.io/travis/yannickcr/eslint-plugin-react/master.svg 268 269[deps-url]: https://david-dm.org/yannickcr/eslint-plugin-react 270[deps-image]: https://img.shields.io/david/dev/yannickcr/eslint-plugin-react.svg 271 272[coverage-url]: https://coveralls.io/r/yannickcr/eslint-plugin-react?branch=master 273[coverage-image]: https://img.shields.io/coveralls/yannickcr/eslint-plugin-react/master.svg 274 275[climate-url]: https://codeclimate.com/github/yannickcr/eslint-plugin-react 276[climate-image]: https://img.shields.io/codeclimate/maintainability/yannickcr/eslint-plugin-react.svg 277 278[status-url]: https://github.com/yannickcr/eslint-plugin-react/pulse 279[status-image]: https://img.shields.io/github/last-commit/yannickcr/eslint-plugin-react.svg 280 281[tidelift-url]: https://tidelift.com/subscription/pkg/npm-eslint-plugin-react?utm_source=npm-eslint-plugin-react&utm_medium=referral&utm_campaign=readme 282[tidelift-image]: https://tidelift.com/badges/github/yannickcr/eslint-plugin-react?style=flat 283
