CD2H gitForager

storybooks/eslint-plugin-react

Name: eslint-plugin-react

Owner: Storybook

Description: React specific linting rules for ESLint

Forked from: yannickcr/eslint-plugin-react

Created: 2017-11-08 23:56:29.0

Updated: 2017-11-08 23:56:32.0

Pushed: 2017-11-09 22:54:00.0

Homepage: null

Size: 2576

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

ESLint-plugin-React

React specific linting rules for ESLint

Installation

Install ESLint either locally or globally.

m install eslint --save-dev

If you installed ESLint globally, you have to install React plugin globally too. Otherwise, install it locally.

m install eslint-plugin-react --save-dev

Configuration

Add plugins section and specify ESLint-plugin-React as a plugin.


lugins": [
"react"

You can also specify some settings that will be shared across all the plugin rules.


ettings": {
"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, such as `forbidExtraProps`. If this isn't set, any propTypes wrapped in a function will be skipped.

If it is not already the case you must also configure ESLint to support JSX.

With ESLint 1.x.x:


cmaFeatures": {
"jsx": true

With ESLint 2.x.x or 3.x.x:


arserOptions": {
"ecmaFeatures": {
  "jsx": true
}

Finally, enable all of the rules that you would like to use. Use our preset to get reasonable defaults quickly, and/or choose your own:

ules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",

List of supported rules

react/boolean-prop-naming: Enforces consistent naming for boolean props
react/default-props-match-prop-types: Prevent extraneous defaultProps on components
react/destructuring-assignment: Rule enforces consistent usage of destructuring assignment in component
react/display-name: Prevent missing displayName in a React component definition
react/forbid-component-props: Forbid certain props on Components
react/forbid-elements: Forbid certain elements
react/forbid-prop-types: Forbid certain propTypes
react/forbid-foreign-prop-types: Forbid foreign propTypes
react/no-access-state-in-setstate: Prevent using this.state inside this.setState
react/no-array-index-key: Prevent using Array index in key props
react/no-children-prop: Prevent passing children as props
react/no-danger: Prevent usage of dangerous JSX properties
react/no-danger-with-children: Prevent problem with children and props.dangerouslySetInnerHTML
react/no-deprecated: Prevent usage of deprecated methods
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-direct-mutation-state: Prevent direct mutation of this.state
react/no-find-dom-node: Prevent usage of findDOMNode
react/no-is-mounted: Prevent usage of isMounted
react/no-multi-comp: Prevent multiple component definition per file
react/no-redundant-should-component-update: Prevent usage of shouldComponentUpdate when extending React.PureComponent
react/no-render-return-value: Prevent usage of the return value of React.render
react/no-set-state: Prevent usage of setState
react/no-typos: Prevent common casing typos
react/no-string-refs: Prevent using string references in ref attribute.
react/no-unescaped-entities: Prevent invalid characters from appearing in markup
react/no-unknown-property: Prevent usage of unknown DOM property (fixable)
react/no-unused-prop-types: Prevent definitions of unused prop types
react/no-unused-state: Prevent definitions of unused state properties
react/no-will-update-set-state: Prevent usage of setState in componentWillUpdate
react/prefer-es6-class: Enforce ES5 or ES6 class for React Components
react/prefer-stateless-function: Enforce stateless React Components to be written as a pure function
react/prop-types: Prevent missing props validation in a React component definition
react/react-in-jsx-scope: Prevent missing React when using JSX
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/require-render-return: Enforce ES5 or ES6 class for returning value in render function
react/self-closing-comp: Prevent extra closing tags for components without children (fixable)
react/sort-comp: Enforce component methods order (fixable)
react/sort-prop-types: Enforce propTypes declarations alphabetical sorting
react/style-prop-object: Enforce style prop value being an object
react/void-dom-elements-no-children: Prevent void DOM elements (e.g. <img />, <br />) from receiving children

JSX-specific rules

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 in JSX (fixable)
react/jsx-curly-spacing: Enforce or disallow spaces inside of curly braces in JSX attributes and expressions (fixable)
react/jsx-equals-spacing: Enforce or disallow spaces around equal signs in JSX attributes (fixable)
react/jsx-filename-extension: Restrict file extensions that may contain JSX
react/jsx-first-prop-new-line: Enforce position of the first prop in JSX (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-key: Validate JSX has key prop when in array or iterator
react/jsx-max-props-per-line: Limit maximum of props on a single line in JSX (fixable)
react/jsx-no-bind: Prevent usage of .bind() and arrow functions in JSX props
react/jsx-no-comment-textnodes: Prevent comments from being inserted as text nodes
react/jsx-no-duplicate-props: Prevent duplicate props in JSX
react/jsx-no-literals: Prevent usage of unwrapped JSX strings
react/jsx-no-target-blank: Prevent usage of unsafe target='_blank'
react/jsx-no-undef: Disallow undeclared variables in JSX
react/jsx-curly-brace-presence: Enforce curly braces or disallow unnecessary curly braces in JSX
react/jsx-pascal-case: Enforce PascalCase for user-defined JSX components
react/jsx-sort-props: Enforce props alphabetical sorting (fixable)
react/jsx-space-before-closing: Validate spacing before closing bracket in JSX (fixable)
react/jsx-tag-spacing: Validate whitespace in and around the JSX opening and closing brackets (fixable)
react/jsx-uses-react: Prevent React to be incorrectly marked as unused
react/jsx-uses-vars: Prevent variables used in JSX to be incorrectly marked as unused
react/jsx-wrap-multilines: Prevent missing parentheses around multilines JSX (fixable)

Other useful plugins

JSX accessibility: eslint-plugin-jsx-a11y
React Native: eslint-plugin-react-native

Shareable configurations

All

This plugin also exports an all configuration that includes every available rule. This pairs well with the eslint:all rule.


lugins": [
"react"

xtends": ["eslint:all", "plugin:react/all"]

Note: These configurations will import eslint-plugin-react and enable JSX in parser options.

License

ESLint-plugin-React is licensed under the MIT License.

This work is supported by the National Institutes of Health's National Center for Advancing Translational Sciences, Grant Number U24TR002306. This work is solely the responsibility of the creators and does not necessarily represent the official views of the National Institutes of Health.