在一些多人参与的项目开发中, 每个人代码习惯不同, 对于缩进, 有人习惯 TAB, 有人习惯两个空格, 有人习惯四个空格. 对于分号, 有人不加, 有人习惯加, 而习惯加分号的人又会经常漏加分号. 试想一个项目代码如果由各种群魔乱舞的风格组成, 这必然会带来一定的视觉障碍(强迫症的人看了受不了=.=), 并且显得代码质量低下.

即使是个人, 偶尔也会写出一些不太规范的代码, 比如变量声明了未使用, 比如使用了 == 等等, 更不要说各种代码格式如操作符左右空格, if ... else 的格式, 末行换行等等. 特别是像有强迫症的我, 有时候写的过程可能会不小心遗漏或写错, 但发现的时候又会去改过来. 如果能在书写过程中检查出不规范的地方提示岂不是最好?

ESLint 是一个插件化的 JavaScript 代码检查工具, 可以用于检查常见的 JavaScript 代码错误, 规范 JavaScript 代码的书写, 可以有效控制代码的质量.

eslint.jpg

ESLint 规则

ESLint 使用非常简单, 安装好 ESLint 后, 可以自定义一套规则文件或者使用开源的代码风格规范, 像 Google, Airbnb 都有开源的 JavaScript 代码书写规范. 可以直接使用它们的, 也可以自己配置.

具体的用法可以参考官方文档, 其实蛮简单的.

这里列出了 ESLint 的各种规则, 可以参考下这里的说明.

以下是我个人配置的规则

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "parser": "babel-eslint",
    "extends": "eslint:recommended",
    "plugins": [
        "babel"
    ],
    "parserOptions": {
        "sourceType": "module"
    },
    "globals": {
        "angular": true,
        "d3": true,
        "ga": true
    },
    "rules": {
        // 4空格缩进 auto
        "indent": [
            "error",
            4
        ],
        // unix 换行风格 auto
        "linebreak-style": [
            "error",
            "unix"
        ],
        // 强制单引号 auto
        "quotes": [
            "error",
            "single"
        ],
        // 禁止分号 auto
        "semi": [
            "error",
            "never"
        ],
        // 变量定义或参数声明未使用
        "no-cond-assign": [
            "warn"
        ],
        // 强制 !== 和 ===, 和 null 或 undefined 比较例外
        "eqeqeq": [
            "error",
            "allow-null"
        ],
        // 强制大括号风格 auto
        "curly": [
            "error",
            "all"
        ],
        // 强制末尾换行 auto
        "eol-last": [
            "error"
        ],
        // 关键字空格 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
        "no-trailing-spaces": [
            "error", 
            { 
                "skipBlankLines": true 
            }
        ],
        // 函数左括号左边不能有空格 auto
        "space-before-function-paren": [
            "error",
            {
                "anonymous": "always", 
                "named": "never"
            }
        ],
        // 操作符周围有空格 auto
        "space-infix-ops": [
            "error", 
            {
                "int32Hint": false
            }
        ],
        "babel/generator-star-spacing": 1,
        "babel/new-cap": 1,
        "babel/array-bracket-spacing": 1,
        "babel/object-shorthand": 1,
        "babel/no-await-in-loop": 1,
        "babel/flow-object-type": 1,
        "babel/func-params-comma-dangle": 1,
        "no-console": "off"
    }
}

建议 parser 换成 babel-eslint, 并加入了 babel 这个插件, 为的是可以解析 ES6 和 ES7 的一些语法. 这里使用的是默认的规则文件 eslint:recommended. 这样对代码的约束比较少, 有更多的灵活性. 默认的规则是禁止代码内出现 console.log 的, 需要用的可以通过 "no-console": "off" 关闭.

举几个例子说明下:

  • qutoes 我习惯在 JavaScript 的字符串中使用单引号, 这个也看个人了, 单引号比双引号容易打

  • semi JavaScript 中分号是没必要的, 因为经常会漏加分号, 并且好像不用分号看起来更简洁好看些, 所以干脆就都不加了

  • no-cond-assign 变量定义或参数声明后未使用, 这是不太规范的, 但我这里使用的 warn 而不是 error

  • eqeqeq 强制 !== 和 == , 除了和 null 与 undefined 比较外, 因为 null == undefined, 对于判断一个变量是否为 null 或 undefined 时 == 比较好用

  • curly 强制大括号风格, 即要求控制语句不能省略大括号, 我喜欢统一的大括号, 不喜欢一会写一会不写的样子

  • eol-last 强制末尾换行, 习惯了, 但有时候也会忘记或者空了好几行, 加这个约束一下

  • keyword-spacing 我设置了关键字前后都要有空格, 按我设置的使用规则后, 就会有以下约束

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // true
    if (foo) {
        //...
    } else if (bar) {
        //...
    } else {
        //...
    }
    // false
    if(foo) {
        //...
    }else if(bar) {
        //...
    }else{
        //...
    }

  • comma-spacing 逗号前面不能有空格, 逗号后面要接空格

    1
    2
    3
    4
    // true
    const a, b, c = 1, 2, 3
    // false
    const a,b,c = 1,2,3

  • key-spacing 冒号前面不能有空格, 后面必须有空格, 键值水平对齐

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // true
    const obj = {
      name: 'kkk',
      id:   2014210
    }
    // false
    const obj = {
      name:'kkk',
      id : 'uuu'
    }

结合 VSCode

VSCode 内置了 ESLint 的支持

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Controls whether eslint is enabled for JavaScript files or not.
"eslint.enable": true,
// A path added to NODE_PATH when resolving the eslint module.
"eslint.nodePath": null,
// Uses the legacy module resolving.
"eslint._legacyModuleResolve": false,
// The eslint options object to provide args normally passed to eslint when executed from a command line.
"eslint.options": {},
// Traces the communication between VSCode and the eslint linter service.
"eslint.trace.server": "off",
// Run the linter on save (onSave) or on type (onType)
"eslint.run": "onType",
// Turns auto fix on save on or off.
"eslint.autoFixOnSave": false,

可以开启 ESLint 检查, 同时在项目目录创建配置文件即可, 之后 ESLint 会自动运行进行检查. 你还可以设置保存时自动修复, 我前面那段配置中注释写明 auto 的表示可以自动修复. 怎么样, 是不是很强大.

不过美中不足的是 VSCode 的 ESLint 貌似还不能检查 HTML 文件中的 JavaScript 代码, 导致我的 vue 文件不能被检查到, 希望后续更新的版本可以解决这个问题吧.

前段时间使用了一阵子 VIM, VIM 快捷键在熟悉了之后用起来确实方便很多, 并且 VIM 插件也非常强大, 占用内存也低. 以前用 WebStorm 写代码动不动 1G 内存以上…

现在用的比较多的就是 VSCode 了, VSCode 还自带了 TypeScript 的支持, 不过目前还没有学习 TypeScript 的打算, 感觉 VSCode 就是微软为前端开发而专门准备的, 不负众望真心好用.

前后端语言统一, 带来了包统一, 比如前后端都可以使用 underscore 等类库, 代码统一, 比如前后端可以共用一段输入检测代码, 工具链统一, 比如前后端都可以使用 ESLint 进行代码风格检查. 真的是非常棒的一种体验.