eslint-config-imweb 文档
IMWeb 团队 eslint 配置规则,基于 eslint-config-airbnb 封装。
使用方法
安装依赖:
npm i --save-dev eslint@5 babel-eslint eslint-config-imweb
1配置
.eslintrc
:小程序项目:
{ "extends": "eslint-config-imweb/weapp" }
1
2
3非小程序项目
{ "extends": "eslint-config-imweb" }
1
2
3
配置
package.json
的scripts:{ ... "scripts": { "lint": "eslint *.js lib test xxx", "lintfix": "eslint --fix *.js lib test xxx" } }
1
2
3
4
5
6
7运行:
npm run lint
1
规则说明
主要在 eslint-config-airbnb 的基础上,关闭了一些规则,下面会一一说明。如果有不同意的地方,欢迎提 issue 进行讨论。
array-callback-return
要求下列数组方法的回调函数有返回值:
- Array.from
- Array.prototype.every
- Array.prototype.filter
- Array.prototype.find
- Array.prototype.findIndex
- Array.prototype.map
- Array.prototype.reduce
- Array.prototype.reduceRight
- Array.prototype.some
- Array.prototype.sort
规则被关闭,关闭原因待补充。
arrow-body-style
在箭头函数能够省略 return 的时候,规定写成 () => ...
还是 () => { ... }
的形式。例如 () => 0
还是 () => { return 0; }
。
规则被关闭,可以灵活设置。
arrow-parens
箭头函数只有一个参数的时候,规定是否必须加括号。例如 (x) => x + 1
还是 x => x + 1
。
规则被关闭,可以灵活设置。
class-methods-use-this
当类的方法中没有使用 this
时,规定该方法应设为静态方法,且调用方式应该变为 MyClass.callStaticMethod()
。例如:
class Hello {
static sayHello() {
console.log("Hello!");
}
}
Hello.sayHello();
2
3
4
5
6
7
规则被关闭,因为若该方法将来需要使用 this
时,所有的调用处均需发生更改。
comma-dangle
要求对象属性、数组元素等最后一个加上末尾逗号。例如:
const x = {
a = 1,
b = 2,
}
const y = { a = 1, b = 2 };
2
3
4
5
6
规则被开启,配置为多行时必须加上,单行时不应加上。
consistent-return
规定函数所有的分支要么都指明返回值,要么都不指明。
规则被关闭,因为经常会写如下代码,在判断条件不符合后直接返回 undefined
:
function doSomething(condition) {
if (condition) {
return;
}
// do something here ...
return result;
}
2
3
4
5
6
7
8
curly
规定 if
, else
, for
, while
等语句的 {}
均不可以被省略。例如:
if (A) {
doSomething()
}
2
3
规则被开启,因为若省略 {}
,则将来该代码块添加其他语句时,容易忘记再写上 {}
。
func-names
规定函数必须有名字。
规则被关闭,因为经常会写如下代码,无需函数名也可清晰表达含义:
Foo.prototype.bar = function() {
// do something here ...
};
2
3
function-paren-newline
规定函数参数要么均在一行,要么每行一个,例如:
function foo(a, b, c) {}
function bar(
a,
b,
c,
)
2
3
4
5
6
7
规则被开启。
import/no-extraneous-dependencies
规定不能引入未在 package.json
中 dependencies
, devDependencies
, optionalDependencies
or peerDependencies
声明的模块。
规则被开启。
import/no-unresolved
规定不能引入本地找不到的模块。
规则被关闭,因为该规则不能很好的适配 node
或者 webpack
外的模块系统,例如 fis
。
jsx-a11y/anchor-is-valid
规定所有的 <a>
标签链接均是有效的。
规则被关闭,因为经常会写如下代码,把 <a>
当作按钮使用:
<a
href="javascript:;"
onClick={this.handleClick}
>
{text}
</a>
2
3
4
5
6
jsx-a11y/click-events-have-key-events
规定所有绑定了 onClick
事件的元素,都必须绑定 onKeyUp
, onKeyDown
, onKeyPress
事件之一,例如:
<div onClick={() => {}} onKeyDown={this.handleKeyDown} />
<div onClick={() => {}} onKeyUp={this.handleKeyUp} />
<div onClick={() => {}} onKeyPress={this.handleKeyPress} />
2
3
规则被关闭,因为我们的交互场景一般无需考虑键盘操作。
jsx-a11y/mouse-events-have-key-events
规定所有绑定了 onMouseOver
, onMouseOut
事件的元素,都必须绑定 onFocus
, onBlur
事件之一,例如:
<div onMouseOver={() => {}} onFocus={this.onFocus} />
<div onMouseOut={() => {}} onBlur={this.onFocus} />
2
规则被关闭,因为我们的交互场景一般无需考虑键盘操作。
jsx-a11y/no-noninteractive-element-interactions
规定 HTML 中非交互性质的元素(如 <main>
, <li>
等)不应该绑定事件响应函数(如 onClick
, onKeyUp
)等。
规则被关闭,因为经常会写如下代码:
<li
onClick={this.onClick}
>
{text}
</li>
2
3
4
5
jsx-a11y/no-noninteractive-element-to-interactive-role
规定 HTML 中非交互性质的元素(如 <main>
, <li>
等),不应该声明 WAI-ARIA roles。
规则被关闭,因为经常会写如下代码:
<li
role="button"
onClick={this.onClick}
>
{text}
</li>
2
3
4
5
6
jsx-a11y/no-noninteractive-tabindex
规定 HTML 中非交互性质的元素(如 <main>
, <li>
等),不应该声明 tabIndex
。
规则被关闭,因为有时会写如下代码:
<ul>
<li
tabIndex={0}
>
{text0}
</li>
<li
tabIndex={1}
>
{text1}
</li>
</ul>
2
3
4
5
6
7
8
9
10
11
12
jsx-a11y/no-static-element-interactions
规定 HTML 中静态元素(如 <div>
, <span>
等)不应该绑定事件响应函数(如 onClick
, onKeyUp
)等。
规则被关闭,因为经常会写如下代码:
<div
onClick={this.onClick}
>
{text}
</div>
2
3
4
5
max-len
规定代码每一行的最大长度。
规则被开启,配置为:
'max-len': [
2,
{
code: 120,
// 忽略链接,例如 'https://www.example.com/really/long'
ignoreUrls: true,
// 忽略字符串,例如 'this is a really long string!'
ignoreStrings: true,
// 忽略模版字符串,例如 `this is a long ${template} literal!`
ignoreTemplateLiterals: true,
},
]
2
3
4
5
6
7
8
9
10
11
12
no-empty
规定不允许空的代码块。
规则被开启,配置为:
'no-empty': [
'error',
{
// 允许空的的 try { ... } catch(e) {}
allowEmptyCatch: true,
}
]
2
3
4
5
6
7
no-mixed-operators
规定不允许混用不同类型的运算符,例如:
- 位运算符,如:
&
,|
,^
,~
,<<
,>>
,>>>
- 逻辑运算符,如:
&&
,||
// Bad
const foo = a && b < 0 || c > 0;
// Good
const foo = (a && b < 0) || c > 0;
2
3
4
5
规则被开启,以增加可读性,也更易修改。
no-param-reassign
规定不允许对函数的参数重新赋值,例如:
function foo(bar) {
bar = 13;
}
2
3
规则被关闭,关闭原因待补充。
no-plusplus
规定不允许使用 ++
自增运算符。
规则被关闭,因为经常会写如下代码:
for (i = 0; i < 10; i++) {
doSomething();
}
2
3
no-return-assign
规定不允许在 return
语句里赋值,例如:
return x = 1;
规则被关闭,关闭原因待补充。
no-sync
规定不允许在 Node.js 中使用同步的操作,例如 fs.existsSync()
等。
规则被设置为警告级别,因为在写某些小工具时,使用同步方法较为简单,但在生产环境还是应该尽量使用异步操作。
no-underscore-dangle
规定不允许在变量名中出现下划线。
规则被关闭,因为这种用法很常见。
object-curly-newline
规定在声明对象自变量时,{}
首尾必须换行。
规则被关闭,因为经常会写出如下代码:
const obj = {};
const obj = { x };
2
prefer-const
规定初始化后不再被修改的变量应用 const
声明。
规则被开启,可有有效避免修改常量。
prefer-destructuring
规定可以使用解构时应采用。
规则被开启,被配置为:
'prefer-destructuring':
[
'error',
{
VariableDeclarator: {
// 数组不强求用解构
array: false,
// 对象强制使用解构
object: true,
},
]
2
3
4
5
6
7
8
9
10
11
react/destructuring-assignment
在 React 中,规定向 props
, state
, context
赋值时,应使用解构,例如:
// Bad
const MyComponent = (props) => {
return (<div id={props.id} />)
};
// Good
const MyComponent = (props) => {
const { id } = props;
return (<div id={id} />)
};
2
3
4
5
6
7
8
9
10
规则被关闭,因为只需使用一次时无需解构,节省代码量。
react/forbid-prop-types
在 React 中,规定在使用 PropTypes
时,不允许使用 any
, array
, object
类型,例如:
// Bad
class Component extends React.Component {
static propTypes = {
a: PropTypes.any,
r: PropTypes.array,
o: PropTypes.object
}
render() {
return <div />;
}
}
2
3
4
5
6
7
8
9
10
11
规则被关闭,使用 array
等较为常见。
react/jsx-filename-extension
在 React 中,规定 JSX 代码只能在后缀名为 .jsx
的文件中。
规则被关闭,因为有时会在 .js
或自定义格式的文件中使用 JSX 代码。
react/jsx-one-expression-per-line
在 React 中,规定每个语句一行,例如:
<App>
{ 'Hello' }
{ ' ' }
{ 'World' }
</App>
2
3
4
5
规则被关闭,因为经常会写出如下代码,省略不必要的换行:
<Welcome>
Hello, { userName }! Welcome to IMWeb!
</Welcome>
2
3
react/no-did-mount-set-state
在 React 中,规定不允许在 componentDidMount()
生命周期函数中调用 this.setState()
函数,要不然会引起二次 render
。
规则被关闭,关闭原因待补充。
react/prop-types
在 React 中,规定每一个组件都应该声明 PropTypes
。
规则被关闭,仅在核心组件声明 PropTypes
即可。
space-before-function-paren
规定在普通函数、匿名函数、箭头函数的 ()
前是否需要添加空格。
规则被关闭,无明显收益。