在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.jb51.cc/react/305086.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。