eslint-config-imweb 文档

IMWeb 团队 eslint 配置规则,基于 eslint-config-airbnb 封装。

使用方法

  1. 安装依赖:

    npm i --save-dev eslint@5 babel-eslint eslint-config-imweb
    
    1
  2. 配置 .eslintrc:

    • 小程序项目:

      {
        "extends": "eslint-config-imweb/weapp"
      }
      
      1
      2
      3
    • 非小程序项目

      {
        "extends": "eslint-config-imweb"
      }
      
      1
      2
      3
  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
  4. 运行:

    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();
1
2
3
4
5
6
7

规则被关闭,因为若该方法将来需要使用 this 时,所有的调用处均需发生更改。

comma-dangle

要求对象属性、数组元素等最后一个加上末尾逗号。例如:



 


 

const x = {
    a = 1,
    b = 2,
}

const y = { a = 1, b = 2 };
1
2
3
4
5
6

规则被开启,配置为多行时必须加上,单行时不应加上。

consistent-return

规定函数所有的分支要么都指明返回值,要么都不指明。

规则被关闭,因为经常会写如下代码,在判断条件不符合后直接返回 undefined

function doSomething(condition) {
    if (condition) {
        return;
    }

    // do something here ...
    return result;
}
1
2
3
4
5
6
7
8

curly

规定 if, else, for, while 等语句的 {} 均不可以被省略。例如:

 

 

if (A) {
    doSomething()
}
1
2
3

规则被开启,因为若省略 {},则将来该代码块添加其他语句时,容易忘记再写上 {}

func-names

规定函数必须有名字。

规则被关闭,因为经常会写如下代码,无需函数名也可清晰表达含义:

 



Foo.prototype.bar = function() {
    // do something here ...
};
1
2
3

function-paren-newline

规定函数参数要么均在一行,要么每行一个,例如:

 


 
 
 


function foo(a, b, c) {}

function bar(
    a,
    b,
    c,
)
1
2
3
4
5
6
7

规则被开启。

import/no-extraneous-dependencies

规定不能引入未在 package.jsondependencies, 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>
1
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} />
1
2
3

规则被关闭,因为我们的交互场景一般无需考虑键盘操作。

jsx-a11y/mouse-events-have-key-events

规定所有绑定了 onMouseOver, onMouseOut 事件的元素,都必须绑定 onFocus, onBlur 事件之一,例如:

<div onMouseOver={() => {}} onFocus={this.onFocus} />
<div onMouseOut={() => {}} onBlur={this.onFocus} />
1
2

规则被关闭,因为我们的交互场景一般无需考虑键盘操作。

jsx-a11y/no-noninteractive-element-interactions

规定 HTML 中非交互性质的元素(如 <main>, <li> 等)不应该绑定事件响应函数(如 onClick, onKeyUp)等。

规则被关闭,因为经常会写如下代码:


 




<li
  onClick={this.onClick}
>
  {text}
</li>
1
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>
1
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>
1
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>
1
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, 
  },
]
1
2
3
4
5
6
7
8
9
10
11
12

no-empty

规定不允许空的代码块。

规则被开启,配置为:

'no-empty': [
  'error',
  {
    // 允许空的的 try { ... } catch(e) {}
    allowEmptyCatch: true,
  }
]
1
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;
1
2
3
4
5

规则被开启,以增加可读性,也更易修改。

no-param-reassign

规定不允许对函数的参数重新赋值,例如:

function foo(bar) {
    bar = 13;
}
1
2
3

规则被关闭关闭原因待补充

no-plusplus

规定不允许使用 ++ 自增运算符。

规则被关闭,因为经常会写如下代码:

 



for (i = 0; i < 10; i++) {
    doSomething();
}
1
2
3

no-return-assign

规定不允许在 return 语句里赋值,例如:

return x = 1;
1

规则被关闭关闭原因待补充

no-sync

规定不允许在 Node.js 中使用同步的操作,例如 fs.existsSync() 等。

规则被设置为警告级别,因为在写某些小工具时,使用同步方法较为简单,但在生产环境还是应该尽量使用异步操作。

no-underscore-dangle

规定不允许在变量名中出现下划线。

规则被关闭,因为这种用法很常见。

object-curly-newline

规定在声明对象自变量时,{} 首尾必须换行。

规则被关闭,因为经常会写出如下代码:

const obj = {};
const obj = { x };
1
2

prefer-const

规定初始化后不再被修改的变量应用 const 声明。

规则被开启,可有有效避免修改常量。

prefer-destructuring

规定可以使用解构时应采用。

规则被开启,被配置为:

'prefer-destructuring': 
[
  'error', 
  {
  VariableDeclarator: {
    // 数组不强求用解构
    array: false,
    // 对象强制使用解构
    object: true,
  },
]
1
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} />)
};
1
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 />;
  }
}
1
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>
1
2
3
4
5

规则被关闭,因为经常会写出如下代码,省略不必要的换行:

<Welcome>
  Hello, { userName }! Welcome to IMWeb!
</Welcome>
1
2
3

react/no-did-mount-set-state

在 React 中,规定不允许在 componentDidMount() 生命周期函数中调用 this.setState() 函数,要不然会引起二次 render

规则被关闭关闭原因待补充

react/prop-types

在 React 中,规定每一个组件都应该声明 PropTypes

规则被关闭,仅在核心组件声明 PropTypes 即可。

space-before-function-paren

规定在普通函数、匿名函数、箭头函数的 () 前是否需要添加空格。

规则被关闭,无明显收益。