React用ESLint代码检测常见问题

在package.json中添加 ESLint依赖，

"eslint": "3.9.0","eslint-config-airbnb": "12.0.0","eslint-plugin-import": "2.0.1","eslint-plugin-jsx-a11y": "2.2.3","eslint-plugin-react": "6.4.1","eslint-plugin-redux-saga": "0.1.5",

并配置

"eslintConfig": {
    "parser": "babel-eslint","extends": "airbnb","env": {
      "browser": true,"node": true,"mocha": true,"es6": true
    },"plugins": [
      "redux-saga","react","jsx-a11y"
    ],"parserOptions": {
      "ecmaVersion": 6,"sourceType": "module","ecmaFeatures": {
        "jsx": true
      }
    },"rules": {
      "arrow-parens": [
        "error","always"
      ],"arrow-body-style": [
        2,"as-needed"
      ],"comma-dangle": [
        2,"always-multiline"
      ],"indent": 0,"linebreak-style": [
        "error","windows"
      ],"no-tabs": 0,"no-param-reassign": [
        "error",{
          "props": false
        }
      ],"no-constant-condition": [
        "error",{
          "checkLoops": false
        }
      ],"object-shorthand": 0,"no-unused-vars":[2,{ "args": "none" }],"import/imports-first": 0,"import/newline-after-import": 0,"import/no-dynamic-require": 0,"import/no-extraneous-dependencies": 0,"import/no-named-as-default": 0,"import/no-unresolved": 0,"import/prefer-default-export": 0,"import/extensions": 0,"jsx-a11y/aria-props": 2,"jsx-a11y/heading-has-content": 0,"jsx-a11y/href-no-hash": 2,"jsx-a11y/label-has-for": 2,"jsx-a11y/mouse-events-have-key-events": 2,"jsx-a11y/role-has-required-aria-props": 2,"jsx-a11y/role-supports-aria-props": 2,"max-len": 0,"newline-per-chained-call": 0,"no-console": 1,"no-use-before-define": 0,"prefer-template": 2,"class-methods-use-this": 0,"react/forbid-prop-types": 0,"react/jsx-first-prop-new-line": [
        2,"multiline"
      ],"react/jsx-filename-extension": 0,"react/jsx-no-target-blank": 0,"react/require-extension": 0,"react/self-closing-comp": 0,"react/jsx-indent": [
        2,"tab"
      ],"react/jsx-indent-props": [
        2,"react/prefer-stateless-function": 0,"redux-saga/no-yield-in-race": 2,"redux-saga/yield-effects": 2,"require-yield": 0
    }

1 ESLint运行

eslint --color app/**/*.js

添加 –fix 可以自动修复一些简单错误，一些规则如：
no-extra-parens 禁止冗余的括号
no-extra-semi 禁止多余的分号

点击这里了解具体规则，
http://eslint.cn/docs/rules/

2 常见错误

具体规则要求参考
https://github.com/yannickcr/eslint-plugin-react
https://github.com/evcohen/eslint-plugin-jsx-a11y

jsx-no-bind

含义：将自定义函数在构造函数中绑定，如果JSX prop 中存在bind，则每次render 生成一个新的function，这样会影响性能。
解决办法，在构造函数中绑定 this

class Foo extends React.Component {
  constructor() {
    super();
    this._onClick = this._onClick.bind(this);
  }
  render() {
    return (
      <div onClick={this._onClick}>
        Hello!
      </div>
    );
  }
  _onClick() {
    // Do whatever you like,referencing "this" as appropriate
  }
}

sort-comp

含义：React中函数的先后顺序
默认的排序，其中everything-else是自定义函数

{ order: [ 'static-methods','lifecycle','everything-else','render' ],groups: { lifecycle: [ 'displayName','propTypes','contextTypes','childContextTypes','mixins','statics','defaultProps','constructor','getDefaultProps','getinitialState','state','getChildContext','componentwillMount','componentDidMount','componentwillReceiveProps','shouldComponentUpdate','componentwillUpdate','componentDidUpdate','componentwillUnmount' ] }
}
static-methods is a spe

通过注释的方式解决

/* eslint-disable */ 某文件 ESLint不检测

/* global variable:false */ 设置全局变量

React用ESLint代码检测 常见问题