Tools: ☂️ Implement React Rules

[Kelbie]

Followed is a list of eslint-plugin-react that we should implement.

• [ ] [react/button-has-type](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/button-has-type.md): Forbid "button" element without an explicit "type" attribute
• [ ] [react/display-name](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md): Prevent missing displayName in a React component definition
• [ ] [react/forbid-component-props](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-component-props.md): Forbid certain props on components
• [ ] [react/function-component-definition](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md): Standardize the way function component get defined (fixable)
• [ ] [react/no-access-state-in-setstate](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-access-state-in-setstate.md): Reports when this.state is accessed within setState
• [ ] [react/no-array-index-key](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md): Prevent usage of Array index in keys
• [ ] [react/no-children-prop](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-children-prop.md): Prevent passing of children as props.
• [ ] [react/no-danger](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-danger.md): Prevent usage of dangerous JSX props
• [ ] [react/no-danger-with-children](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-danger-with-children.md): Report when a DOM element is using both children and dangerouslySetInnerHTML
• [ ] [react/no-deprecated](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-deprecated.md): Prevent usage of deprecated methods
• [ ] [react/no-direct-mutation-state](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-direct-mutation-state.md): Prevent direct mutation of this.state
• [ ] [react/no-find-dom-node](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-find-dom-node.md): Prevent usage of findDOMNode
• [ ] [react/no-is-mounted](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md): Prevent usage of isMounted
• [ ] [react/no-redundant-should-component-update](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-redundant-should-component-update.md): Flag shouldComponentUpdate when extending PureComponent
• [ ] [react/no-render-return-value](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-render-return-value.md): Prevent usage of the return value of React.render
• [ ] [react/no-string-refs](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-string-refs.md): Prevent string definitions for references and prevent referencing this.refs
• [ ] [react/no-this-in-sfc](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-this-in-sfc.md): Report "this" being used in stateless components
• [ ] [react/no-typos](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-typos.md): Prevent common typos
• [ ] [react/no-unescaped-entities](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unescaped-entities.md): Detect unescaped HTML entities, which might represent malformed tags
• [ ] [react/no-unknown-property](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md): Prevent usage of unknown DOM property (fixable)
• [ ] [react/no-unsafe](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unsafe.md): Prevent usage of unsafe lifecycle methods
• [ ] [react/no-unused-prop-types](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unused-prop-types.md): Prevent definitions of unused prop types
• [ ] [react/no-unused-state](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unused-state.md): Prevent definition of unused state fields
• [ ] [react/no-will-update-set-state](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-will-update-set-state.md): Prevent usage of setState in componentWillUpdate
• [ ] [react/prefer-es6-class](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md): Enforce ES5 or ES6 class for React Components
• [ ] [react/prefer-read-only-props](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-read-only-props.md): Require read-only props. (fixable)
• [ ] [react/prefer-stateless-function](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md): Enforce stateless components to be written as a pure function
• [ ] [react/react-in-jsx-scope](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md): Prevent missing React when using JSX
• [ ] [react/require-render-return](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-render-return.md): Enforce ES5 or ES6 class for returning value in render function
• [ ] [react/sort-comp](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md): Enforce component methods order
• [ ] [react/state-in-constructor](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/state-in-constructor.md): State initialization in an ES6 class component should be in a constructor
• [ ] [react/style-prop-object](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/style-prop-object.md): Enforce style prop value is an object
• [ ] [react/void-dom-elements-no-children](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/void-dom-elements-no-children.md): Prevent passing of children to void DOM elements (e.g. <br />).
• [ ] react/no-did-mount-set-state: Prevent usage of setState in componentDidMount
• [ ] react/no-did-update-set-state: Prevent usage of setState in componentDidUpdate
• [ ] react/no-set-state: Prevent usage of setState
• [ ] react/boolean-prop-naming: Enforces consistent naming for boolean props
• [ ] react/default-props-match-prop-types: Enforce all defaultProps are defined and not "required" in propTypes.
• [ ] react/destructuring-assignment: Enforce consistent usage of destructuring assignment of props, state, and context
• [ ] react/forbid-dom-props: Forbid certain props on DOM Nodes
• [ ] react/forbid-elements: Forbid certain elements
• [ ] react/forbid-foreign-prop-types: Forbid using another component's propTypes
• [ ] react/forbid-prop-types: Forbid certain propTypes
• [ ] react/no-adjacent-inline-elements: Prevent adjacent inline elements not separated by whitespace.
• [ ] react/no-multi-comp: Prevent multiple component definition per file
• [ ] react/prop-types: Prevent missing props validation in a React component definition
• [ ] react/require-default-props: Enforce a defaultProps definition for every prop that is not a required prop.
• [ ] react/require-optimization: Enforce React components to have a shouldComponentUpdate method
• [ ] react/self-closing-comp: Prevent extra closing tags for components without children (fixable)
• [ ] react/sort-prop-types: Enforce propTypes declarations alphabetical sorting
• [ ] react/static-property-placement: Defines where React component static properties should be positioned.

JSX-specific rules

• [ ] [react/jsx-key](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-key.md): Report missing key props in iterators/collection literals @tatchi
• [ ] [react/jsx-no-bind](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md): Prevents usage of Function.prototype.bind and arrow functions in React component props
• [ ] [react/jsx-no-duplicate-props](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-duplicate-props.md): Enforce no duplicate props @KevinKelbie
• [ ] [react/jsx-no-script-url](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-script-url.md): Forbid javascript: URLs
• [ ] [react/jsx-no-target-blank](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-target-blank.md): Forbid target="_blank" attribute without rel="noopener noreferrer"
• [ ] [react/jsx-no-undef](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-undef.md): Disallow undeclared variables in JSX
• [ ] [react/jsx-no-useless-fragment](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-useless-fragment.md): Disallow unnecessary fragments (fixable)
• [ ] [react/jsx-uses-react](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-uses-react.md): Prevent React to be marked as unused
• [ ] [react/jsx-uses-vars](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-uses-vars.md): Prevent variables used in JSX to be marked as unused
• [ ] react/jsx-child-element-spacing: Ensures inline tags are not rendered without spaces between them
• [ ] react/jsx-filename-extension: Restrict file extensions that may contain JSX
• [ ] react/jsx-no-comment-textnodes: Comments inside children section of tag should be placed inside braces
• [ ] react/jsx-boolean-value: Enforce boolean attributes notation in JSX (fixable)
• [ ] react/jsx-closing-bracket-location: Validate closing bracket location in JSX (fixable)
• [ ] react/jsx-closing-tag-location: Validate closing tag location for multiline JSX (fixable)
• [ ] react/jsx-curly-brace-presence: Disallow unnecessary JSX expressions when literals alone are sufficient or enfore JSX expressions on literals in JSX children or attributes (fixable)
• [ ] react/jsx-curly-newline: Enforce consistent line breaks inside jsx curly (fixable)
• [ ] react/jsx-curly-spacing: Enforce or disallow spaces inside of curly braces in JSX attributes (fixable)
• [ ] react/jsx-equals-spacing: Disallow or enforce spaces around equal signs in JSX attributes (fixable)
• [ ] react/jsx-first-prop-new-line: Ensure proper position of the first property in JSX (fixable)
• [ ] react/jsx-fragments: Enforce shorthand or standard form for React fragments (fixable)
• [ ] react/jsx-handler-names: Enforce event handler naming conventions in JSX
• [ ] react/jsx-indent: Validate JSX indentation (fixable)
• [ ] react/jsx-indent-props: Validate props indentation in JSX (fixable)
• [ ] react/jsx-max-depth: Validate JSX maximum depth
• [ ] react/jsx-max-props-per-line: Limit maximum of props on a single line in JSX (fixable)
• [ ] react/jsx-no-literals: Prevent using string literals in React component definition
• [ ] react/jsx-one-expression-per-line: Limit to one expression per line in JSX (fixable)
• [ ] react/jsx-pascal-case: Enforce PascalCase for user-defined JSX components
• [ ] react/jsx-space-before-closing: Validate spacing before closing bracket in JSX (fixable)
• [ ] react/jsx-props-no-multi-spaces: Disallow multiple spaces between inline JSX props (fixable)
• [ ] react/jsx-props-no-spreading: Prevent JSX prop spreading
• [ ] react/jsx-sort-default-props: Enforce default props alphabetical sorting
• [ ] react/jsx-sort-props: Enforce props alphabetical sorting (fixable)
• [ ] react/jsx-tag-spacing: Validate whitespace in and around the JSX opening and closing brackets (fixable)
• [ ] react/jsx-wrap-multilines: Prevent missing parentheses around multilines JSX (fixable)

Rules of Hooks

Documented here

• [ ] react-hooks/rules-of-hooks
• [ ] react-hooks/exhaustive-deps

Please comment if you want to work on one of these and I'll mark you to avoid duplicating work. Mentions next to rules indicate that someone else is working on it. If a PR isn't opened within a few days then it will be up for grabs.

A checkmark indicates an open PR.

A reference implementation of these features can be found here

[Kelbie]

I have omitted (w/ strikethrough) all the rules that are about code style. If there is a rule that shouldn't be omitted let me know but keep in mind we are not focussing on code style for now.

[macovedj]

Will these go where most of the linter work has happened thus far? Or will these go in an expansion-pack? If they go in an expansion pack then I guess we would need an issue/PR to create the react expansion pack? I'll pick one up after I do the regex item I'm currently slated for.

[Kelbie]

@sebmck that's something I was meaning to ask you ☝️

[mattcompiles]

I feel a few of these rules are quite dated and should be omitted. Specifically react/no-did-update-set-state, react/no-set-state and react/no-did-mount-set-state.

[mattcompiles]

Also we need to support eslint-plugin-react-hooks.

[tatchi]

I can try to implement react/jsx-key :)

[sebmck]

Please don’t get started on any changes until we have consensus on the rules, expansion packs, and consult the React team so we’re following their recommended best practices.

[Kelbie]

Closing in favor of #341

[mnemanja]

@KevinKelbie I hope this list will be transferred somewhere else or at least maintained here as it progresses. It makes no sense to just leave it.