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,
        "tab"
      ],
      "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 */ 设置全局变量