在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 */ 设置全局变量
原文链接:https://www.f2er.com/react/305086.html