设置我的 eslint 配置

发表于 |

本篇主要记录了我针对自己的习惯，对 eslint 的一些配置的更改。我一般用的是 Airbnb 的编码规范。

最开始我会自己去配置 webpack 的相关插件等。后来发现中间去使用的成本太高了，往往配置就花费了我不少时间，现在我主要是使用一些比较成熟的 cli, 比如 vue-cli, react-cli 等。下面的这份 eslint 继承自 airbnb-base, 覆盖了一些我不习惯使用的配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
  extends: ['plugin:vue/essential', 'airbnb-base'],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // check if imports actually resolve
  settings: {
    'import/resolver': {
      webpack: {
        config: 'build/webpack.base.conf.js'
      }
    }
  },
  // add your custom rules here
  rules: {
    // don't require .vue extension when importing
    'import/extensions': ['error', 'always', {
      js: 'never',
      vue: 'never'
    }],
    // disallow reassignment of function parameters
    // disallow parameter object manipulation except for specific exclusions
    'no-param-reassign': ['error', {
      props: true,
      ignorePropertyModificationsFor: [
        'vm',
        'state', // for vuex state
        'acc', // for reduce accumulators
        'e' // for e.returnvalue
      ]
    }],
    // allow optionalDependencies
    'import/no-extraneous-dependencies': ['error', {
      optionalDependencies: ['test/unit/index.js']
    }],
    // 禁止分号 auto
    'semi': [
      'error',
      'never'
    ],
    // 禁止使用拖尾逗号
    'comma-dangle': [
      'error',
      'never'
    ],
    // 箭头函数的括号，只在有多个参数时才使用
    'arrow-parens': [
      'error',
      'as-needed'
    ],
    'arrow-body-style': [
      'error',
      'always'
    ],
    // 允许我使用 表达式
    'no-unused-expressions': ['error', { 'allowShortCircuit': true, 'allowTernary': true }],
    // 放宽最大的支持宽度
    'max-len': [2, 150, 4, { 'ignoreUrls': true }],
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

这上面因为是已经继承自 airbnb-base ,所以很多默认的配置都没有写下来，比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
// 强制单引号 auto
"quotes": [
    "error",
    "single"
],
 // 变量定义或参数声明未使用
"no-cond-assign": [
    "warn"
],
// 关键字空格 auto
"keyword-spacing": [
    "error",
    {
        "before": true,
        "after": true
    }
],
// 强制单行代码块中使用空格 auto
"block-spacing": [
    "error",
    "always"
],
// 逗号前面不能由空格, 后面要空格 auto
"comma-spacing": [
    "error",
    {
        "before": false,
        "after": true
    }
],
// 冒号前面不能有空格, 后面必须有空格, 键值需水平对齐 auto
"key-spacing": [
    "error",
    {
        "beforeColon": false,
        "afterColon": true,
        "align": "value"
    }
],
// 参数未使用提示
"no-unused-vars": [
    "warn",
    {
        "var": "all",
        "all": "all"
    }
],
 // 函数左括号左边不能有空格 auto
"space-before-function-paren": [
    "error",
    {
        "anonymous": "always",
        "named": "never"
    }
]

对了，顺便记录一个 vue-cli 配置的问题（不值得开一个新文章，但是想记录下）。

有的时候，如果我们配置了 host , 在本地访问是也许会出现 invalid host 之类的错误，正常访问不了页面，这个时候只需要找到 devServer, 增加一个 disableHostCheck: true 即可。让它不去检测 host, 等到正式上线，再把这个去掉或者更改为 false 即可。

1
2
3
4
5
6
7
8
9
devServer: {
    disableHostCheck: true,
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.shtml') },
      ],
    }
    ......

在项目中使用 eslint 当然是好处多多，规范自己的代码，心情也会好很多。下面是我记录的一些对 airbnb ，自己老是会忘记的几个点。

No Object.assign

Prefer the object spread operator over Object.assign to shallow-copy objects. Use the object rest operator to get a new object with certain properties omitted.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // this mutates `original` ಠ_ಠ
delete copy.a; // so does this

// bad
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }

// good
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }

const { a, ...noA } = copy; // noA => { b: 2, c: 3 }

Use array spreads … to copy arrays.

1
2
3
4
5
6
7
8
9
10
11
// bad
const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i += 1) {
  itemsCopy[i] = items[i];
}

// good
const itemsCopy = [...items];

To convert an array-like object to an array, use spreads … instead of Array.from.

1
2
3
4
5
6
7
const foo = document.querySelectorAll('.foo');

// good
const nodes = Array.from(foo);

// best
const nodes = [...foo];

Use Array.from instead of spread … for mapping over iterables, because it avoids creating an intermediate array.

1
2
3
4
5
// bad
const baz = [...foo].map(bar);

// good
const baz = Array.from(foo, bar);

Use object destructuring when accessing and using multiple properties of an object. eslint: prefer-destructuring jscs: requireObjectDestructuring

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;

  return `${firstName} ${lastName}`;
}

// good
function getFullName(user) {
  const { firstName, lastName } = user;
  return `${firstName} ${lastName}`;
}

// best
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}

Use array destructuring. eslint: prefer-destructuring jscs: requireArrayDestructuring

1
2
3
4
5
6
7
8
const arr = [1, 2, 3, 4];

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;

Never use arguments, opt to use rest syntax … instead. eslint: prefer-rest-params

自己老是用第一种方法，哈哈，第二种多好。

1
2
3
4
5
6
7
8
9
10
// bad
function concatenateAll() {
  const args = Array.prototype.slice.call(arguments);
  return args.join('');
}

// good
function concatenateAll(...args) {
  return args.join('');
}

Why? Modules are the future, let’s start using the future now.

1
2
3
4
5
6
7
8
9
10
11
// bad
const AirbnbStyleGuide = require('./AirbnbStyleGuide');
module.exports = AirbnbStyleGuide.es6;

// ok
import AirbnbStyleGuide from './AirbnbStyleGuide';
export default AirbnbStyleGuide.es6;

// best
import { es6 } from './AirbnbStyleGuide';
export default es6;

Do not use wildcard imports.

有的时候我还是会用到 * 的，因为也许里面的内容如果我都需要使用到呢。
Why? This makes sure you have a single default export.

1
2
3
4
5
// bad
import * as AirbnbStyleGuide from './AirbnbStyleGuide';

// good
import AirbnbStyleGuide from './AirbnbStyleGuide';

In modules with a single export, prefer default export over named export. eslint: import/prefer-default-export

Why? To encourage more files that only ever export one thing, which is better for readability and maintainability.

1
2
3
4
5
// bad
export function foo() {}

// good
export default function foo() {}

Multiline imports should be indented just like multiline array and object literals.

Why? The curly braces follow the same indentation rules as every other curly brace block in the style guide, as do the trailing commas.

1
2
3
4
5
6
7
8
9
10
11
// bad
import {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path';

// good
import {
  longNameA,
  longNameB,
  longNameC,
  longNameD,
  longNameE,
} from 'path';