React specific linting rules for ESLint
用于React的ESLint规则

Installation

安装

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.
如果您全局安装ESLint,您不得不也全局安装React组件 ，否则就本地安装它。

$ npm install eslint-plugin-react --save-dev

Configuration

配置

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" 默认使用React语法
      "version": "detect", // React version. "detect" automatically picks the version you have installed. React版本，自动检索你安装的版本
                           // You can also use `16.0`, `16.3`, etc, if you want to override the detected value. 如果你想重写检索值，你也可以使用16.0，16.3等值。
      "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. 任何函数名常常用于包裹propTypes，例如"forbidExtraProps"，如果没有被设置，任何被函数包裹的propType将被忽略。
        "forbidExtraProps",
        {"property": "freeze", "object": "Object"},
        {"property": "myFavoriteWrapper"}
    ]
  }
}

If you do not use a preset you will need to specify individual rules and add extra configuration.
如果你没有使用预先设置,你就需要指定独有规则，并且添加额外的配置。

Add "react" to the plugins section.
添加"react"到插件部分

{
  "plugins": [
    "react"
  ]
}

Enable JSX support.
支持JSX语法
With ESLint 2+
在 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",
  }

List of supported rules

规则列表

• react/boolean-prop-naming: Enforces consistent naming for boolean props 布尔属性的命名一致性 需要以is或has为前缀
• react/button-has-type: Forbid "button" element without an explicit "type" attribute 按钮元素需要明确的type属性
• 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 禁止组件中有十分明确的props属性
• react/forbid-dom-props: Forbid certain props on DOM Nodes //禁止在DOM节点上使用的props属性
• react/forbid-elements: Forbid certain elements 禁止使用某种元素组件
• react/forbid-prop-types: Forbid certain propTypes 禁止特定的propType
• react/forbid-foreign-prop-types: Forbid foreign propTypes //禁止外来的propType属性
• react/no-access-state-in-setstate: Prevent using this.state inside this.setState 禁止在setState中使用this.state
• react/no-array-index-key: Prevent using Array index in key props 阻止使用Array的序号作为props 的key
• react/no-children-prop: Prevent passing children as props 禁止使用props传递children
• react/no-danger: Prevent usage of dangerous JSX properties 禁止使用危险的JSX属性
• react/no-danger-with-children: Prevent problem with children and props.dangerouslySetInnerHTML 禁止同时使用children和dangerouslySetInnerHTML
• react/no-deprecated: Prevent usage of deprecated methods, including component lifecyle methods 禁止使用过时的方法，包括组件生命周期方法
• react/no-did-mount-set-state: Prevent usage of setState in componentDidMount 禁止在 componentDidMount方法中使用setState
• react/no-did-update-set-state: Prevent usage of setState in componentDidUpdate 禁止在componentDidUpdate使用setState
• react/no-direct-mutation-state: Prevent direct mutation of this.state 禁止this.state的状态突变
• react/no-find-dom-node: Prevent usage of findDOMNode //禁止使用 "findDOMNode"
• react/no-is-mounted: Prevent usage of isMounted //禁止使用"isMounted"
• react/no-multi-comp: Prevent multiple component definition per file 禁止每个文件中定义多个组件
• react/no-redundant-should-component-update: Prevent usage of shouldComponentUpdatewhen extending React.PureComponent 当扩展React.PureComponent 时禁止使用"shouldComponentUpdate"生命周期函数
• react/no-render-return-value: Prevent usage of the return value of React.render 禁止使用"React.render"的返回值
• react/no-set-state: Prevent usage of setState 无状态组件中禁止使用setState
• react/no-typos: Prevent common casing typos //确保没有声明静态类属性和生命周期方法的大小写错误
• react/no-string-refs: Prevent using string references in ref attribute. 禁止使用字符串 作为ref 属性的值
• react/no-this-in-sfc: Prevent using this in stateless functional components 无状态组件中禁止使用this
• react/no-unescaped-entities: Prevent invalid characters from appearing in markup 防止标签中出现无效字符
• react/no-unknown-property: Prevent usage of unknown DOM property (fixable) 禁止使用未知的DOM属性
• react/no-unsafe: Prevent usage of unsafe lifecycle methods 禁止使用不安全的生命周期函数
• react/no-unused-prop-types: Prevent definitions of unused prop types 禁止定义未使用的propTypes的属性
• react/no-unused-state: Prevent definitions of unused state properties 禁止定义未使用的state属性
• react/no-will-update-set-state: Prevent usage of setState in componentWillUpdate 禁止在'componentWillUpdate'中使用setState
• react/prefer-es6-class: Enforce ES5 or ES6 class for React Components 强制使用ES5 或ES6的类
• 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组件定义中缺少props验证
• react/react-in-jsx-scope: Prevent missing React when using JSX 防止在使用JSX是丢失React
• 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 shouldComponentUpdatemethod 强制 React 组件拥有shouldComponentUpdate 方法
• react/require-render-return: Enforce ES5 or ES6 class for returning value in render function 强制ES5或ES6类在render函数中有返回值
• 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 严格要求propTypes按照字母表的顺序排序
• react/style-prop-object: Enforce style prop value being an object 严格要求style属性值继承于object属性
• react/void-dom-elements-no-children: Prevent void DOM elements (e.g. <img />, <br />) from receiving children 禁止空DOM元素接受子元素

JSX-specific rules

• react/jsx-boolean-value: Enforce boolean attributes notation in JSX (fixable) 强制布尔属性的记号
• react/jsx-child-element-spacing: Enforce or disallow spaces inside of curly braces in JSX attributes and expressions.
• 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 验证数组中或迭代器中的key属性
• 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-bind: Prevent usage of .bind() and arrow functions in JSX props 预防bind和箭头函数的使用
• 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' 避免使用不安全的target=_blank属性
• react/jsx-no-undef: Disallow undeclared variables in JSX 不允许使用未声名的变量
• react/jsx-one-expression-per-line: Limit to one expression per line in JSX 限制单行的表达式数量
• react/jsx-curly-brace-presence: Enforce curly braces or disallow unnecessary curly braces in JSX 使用花括号或禁止非必要的花括号
• react/jsx-fragments: Enforce shorthand or standard form for React fragments 强制使用React fragments的缩写或标准样式
• react/jsx-pascal-case: Enforce PascalCase for user-defined JSX components 用户自定义的组件强制使用PascalCase命名法
• react/jsx-props-no-multi-spaces: Disallow multiple spaces between inline JSX props (fixable) 内联属性之间避免出现多个空格
• react/jsx-sort-default-props: Enforce default props alphabetical sorting 强制默认属性按字母顺序排序
• 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被错误的标记为未使用
• 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) 多行JSX需要使用圆括号扩起来

Other useful plugins

其他有用的插件

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

Shareable configurations

共用配置

Recommended

推荐

This plugin exports a recommended configuration that enforces React good practices.
该插件导出一个推荐的配置以实现更好的业务
To enable this configuration use the extends property in your .eslintrc config file:
在.eslintrc配置文件内使用extends 属性可以开启他

{
  "extends": ["eslint:recommended", "plugin:react/recommended"]
}

See ESLint documentation for more information about extending configuration files.
查阅ESLint Document 以获取更多关于扩展配置文件的信息。
The rules enabled in this configuration are:
该配置文件可使用的规则如下

• react/display-name
• react/jsx-key
• react/jsx-no-comment-textnodes
• react/jsx-no-duplicate-props
• react/jsx-no-target-blank
• react/jsx-no-undef
• react/jsx-uses-react
• react/jsx-uses-vars
• react/no-children-prop
• react/no-danger-with-children
• react/no-deprecated
• react/no-direct-mutation-state
• react/no-find-dom-node
• react/no-is-mounted
• react/no-render-return-value
• react/no-string-refs
• react/no-unescaped-entities
• react/no-unknown-property
• react/prop-types
• react/react-in-jsx-scope
• react/require-render-return

All

This plugin also exports an all configuration that includes every available rule. This pairs well with the eslint:all rule.
该插件同样的导出一个囊括每一个可使用的规则，这与'eslint:all`规则很匹配

{
  "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' 并在解析器中启用JSX

License

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