eslint配置文档

ESLint配置


ESLint是一个QA工具,用来避免低级错误和统一代码的风格。ESLint被设计为完全可配置的,主要有两种方式来配置ESLint:

  • 在注释中配置:使用JavaScript注释直接把配置嵌入到JS文件中。
  • 配置文件:使用.eslintrc.js或者.eslintrc.json来为全部的目录和它的子目录指定配置信息。

写在前面

根据官方文档说明,eslint可以全局安装,也可以项目本地安装,配置的约束即规则可以是全局的也可以是项目本地的配置文件,选取全局安装的eslint和全局安装的eslint所需相关插件,配合不同项目的各自的配置文件一起食用最佳。

由于该文档是针对特定项目特定环境,所以目的只是把安装配置的步骤写出来,其他的有关知识需要自行百度或谷歌。

1. 新建.eslintrc.js在项目根目录

.eslintrc.js。

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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
module.exports = {
//环境定义了预定义的全局变量。更多在官网查看
"env": {
"browser": true, // 支持浏览器全局变量的使用
"es6": true, // 支持es6语法
"amd": true, // 支持amd语法
"node": true //支持nodejs全局变量
},
"parser": "babel-eslint",// 支持es6语法检查
"plugins": ['html', 'react'], // html插件支持vue文件和html文件里的js语法检查,react插件支持react语法规范检查
"extends": ["airbnb"], // 继承airbnb流行的js语法规则
"rules": {
// 规范的rules,可以在官方文档查询相关知识
"no-cond-assign": 2,
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
],
"no-console": [
"error",
{
"allow": [
"warn",
"error"
]
}
],
"max-len": [
"error",
{
code: 120,
ignoreUrls: true,
ignoreStrings: true
}
],
"object-curly-spacing": [
"error", "always"
],
'quote-props': [
'error', 'as-needed'
],
'no-param-reassign': 0,
'radix': ['error', 'always'],//parseInt
'no-mixed-operators': 0,
'func-names': ['error', 'never'],
'object-shorthand':[ //
'error','always'
],
"arrow-body-style":["error","as-needed"],
"no-alert": 2, // 禁止使用alert confirm prompt
"no-array-constructor": 2, // 禁止使用数组构造器
"no-bitwise": 2, // 禁止使用按位运算符
"no-caller": 2, // 禁止使用arguments.caller或arguments.callee
"no-catch-shadow": 2, // 禁止catch子句参数与外部作用域变量同名
"no-class-assign": 2, // 禁止给类赋值
"no-constant-condition": 2, // 禁止在条件中使用常量表达式 if(true) if(1)
"no-control-regex": 2, // 禁止在正则表达式中使用控制字符
"no-dupe-keys": 2, // 在创建对象字面量时不允许键重复 {a: 1, a: 1}
"no-empty": 2, // 块语句中的内容不能为空
"no-empty-character-class": 2, // 正则表达式中的[]内容不能为空
"no-eval": 2, // 禁止使用eval
"no-ex-assign": 2, // 禁止给catch语句中的异常参数赋值
"no-extend-native": 2, // 禁止扩展native对象
"no-extra-bind": 2, // 禁止不必要的函数绑定
"no-extra-boolean-cast": 2, // 禁止不必要的bool转换
"no-fallthrough": 2, // 禁止switch穿透
"no-func-assign": 2, // 禁止重复的函数声明
"no-implied-eval": 2, // 禁止使用隐式eval
"no-inner-declarations": [2, "functions"], // 禁止在块语句中使用声明函数
"no-invalid-regexp": 2, // 禁止无效的正则表达式
"no-irregular-whitespace": 2, // 不能有不规则的空格
"no-label-var": 2, // label名不能与var声明的变量名相同
"no-labels": 2, // 禁止标签声明
"no-lone-blocks": 2, // 禁止不必要的嵌套块
"no-loop-func": 2, // 禁止在循环中使用函数(如果没有引用外部变量不形成闭包就可以)
"no-mixed-spaces-and-tabs": [2, false], // 禁止混用tab和空格
"no-multi-spaces": 2, // 不能用多余的空格
"no-multi-str": 2, // 字符串不能用\换行
"no-native-reassign": 2, // 不能重写native对象
"no-negated-in-lhs": 2, // in 操作符的左边不能有!
"no-new-func": 2, // 禁止使用new Function
"no-new-object": 2, // 禁止使用new Object()
"no-new-wrappers": 2, // 禁止使用new创建包装实例,new String new Boolean new Number
"no-obj-calls": 2, // 不能调用内置的全局对象,比如Math() JSON()
"no-octal": 2, // 禁止使用八进制数字(因为八进制数字以0开头)
"no-octal-escape": 2, // 禁止使用八进制转义序列
"no-proto": 2, // 禁止使用__proto__属性(按照标准,__proto__为私有属性,不应公开)
"no-redeclare": 2, // 禁止重复声明变量
"no-regex-spaces": 2, // 禁止在正则表达式字面量中使用多个空格 /foo bar/
"no-script-url": 2, // 禁止使用javascript:void(0)
"no-sequences": 2, // 禁止使用逗号运算符
"no-shadow-restricted-names": 2, // 严格模式中规定的限制标识符不能作为声明时的变量名使用
"no-spaced-func": 2, // 函数调用时 函数名与()之间不能有空格
"no-sparse-arrays": 2, // 禁止稀疏数组, [1,,2]
"no-trailing-spaces": 2, // 一行结束后面不要有空格( 空白行忽略 )
"no-undef": 2, // 不能有未定义的变量
"no-undef-init": 2, // 变量初始化时不能直接给它赋值为undefined
"no-unreachable": 2, // 不能有无法执行的代码
"no-unused-vars": 2, // 不能有声明后未被使用的变量或参数
"no-use-before-define": [2, "nofunc"], // 函数未定义前不能使用
"no-const-assign": 2, // 禁止修改const声明的变量
"no-with": 2, // 禁用with,
"no-var":2,// 不允许使用var声明变量
"comma-dangle": [2, "never"], // 数组或对象最后不允许出现多余的逗号
"comma-spacing": 2, // 逗号前面不允许有空格,后面还有东西的时候必须有一个空格
"curly": [2, "multi-line"], // 块级代码需要换行的时候必须使用 {}将代码裹起来
"eol-last": 2, // 文件以单一的换行符结束
"eqeqeq": [2, "allow-null"], // 必须使用全等
"indent": ["error", 2], // 缩进用tab
"key-spacing": [2, {
"beforeColon": false,
"afterColon": true
}], // 对象字面量中冒号的后面必须有空格,前面不允许有空格
"keyword-spacing": [2, {
"before": true,
"after": true
}], // 关键字前后必须存在空格
"new-parens": 2,// new时必须加小括号 const person = new Person();
"semi-spacing": [0, {
"before": false,
"after": true
}], // 分号前面不允许有空格,后面有其他东西的时候必须空一空格
"space-before-blocks": [2, "always"], // 不以新行开始的块 { 前面要有空格
"space-before-function-paren": [2, "never"], // 函数定义时括号前面不允许有空格
"space-infix-ops": 2, // 中缀操作符周围必须有空格 a + b
'no-restricted-syntax': [
'error',
{
selector: 'ForInStatement',
message: 'for..in 循环会迭代原型链上你不需要的内容. 使用 Object.{keys,values,entries},或在array上使用forEach来遍历元素',
},
{
selector: 'ForOfStatement',
message: 'iterators/generators require regenerator-runtime, which is too heavyweight for this guide to allow them. Separately, loops should be avoided in favor of array iterations.',
},
{
selector: 'LabeledStatement',
message: 'Labels are a form of GOTO; using them makes code confusing and hard to maintain and understand.',
},
{
selector: 'WithStatement',
message: '`with` is disallowed in strict mode because it makes code impossible to predict and optimize.',
},
],
"space-unary-ops": [2, {
"words": true,
"nonwords": false
}], // 一元运算符的前/后如果是单词则空一空格,如果是运算符则不需要空空格 new Foo √ 1++ √
"spaced-comment": [2, "always", { "markers": ["*!"] }], // 注释风格, 双斜杠后面空一格空格再写注释
"strict": [2, "global"], // 使用全局严格模式
"use-isnan": 2 // 禁止比较时使用NaN,只能用isNaN()
"react/no-danger": 0,
"react/no-array-index-key": 0,
"react/jsx-no-bind": [0, {"allowBind": true}],
"jsx-a11y/no-static-element-interactions": 0,
"import/no-unresolved": [2, { "ignore": ["loader|react-router|css|style|sass|vue"] }],
"react/jsx-uses-react": 1, // [react/jsx-uses-react](https://github
.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-uses-react.md)
"react/jsx-no-undef": 2,
"react/jsx-wrap-multilines": 2, // [react/jsx-wrap-multilines](https://github
.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-wrap-multilines.md)
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"react/forbid-prop-types": 0,
"no-underscore-dangle": [1, { "allow": ["__INITIAL_STATE__"] }],
"jsx-a11y/label-has-for": [0, {
"components": [ "Label" ]
}]
}
};

2. 全局安装eslint和相关插件

从以上配置文件,可以看到需要全局安装一些插件才能实现eslint检查,为了支持es6语法检查,需要安装babel-eslinteslint-plugin-import
eslint-plugin-promise,为了继承airbnb扩展,需要安装[eslint-config-airbnb]
(https://www.npmjs
.com/package/eslint-config-airbnb),eslint-pugin-jsx-a11y
为了实现html和vue检测,需要安装eslint-plugin-html,
为了实现react语法规范检查,需要安装eslint-plugin-react

1
2
npm i -g eslint babel-eslint eslint-config-airbnb eslint-pugin-jsx-a11y eslint-plugin-html
eslint-plugin-import eslint-plugin-promise eslint-plugin-react

3. 项目根目录下新建.eslintignore和.editorconfig文件

webstorm支持.eslintignore文件需要安装插件.ignore,根据提示安装即可。

1
2
**/dist/**
**/node_modules/**

.editorconfig是一套用于统一代码格式的解决方案,EditorConfig可以帮助开发者在不同的编辑器和IDE之间定义和维护一致的代码风格。EditorConfig包含一个用于定义代码格式的文件和一批编辑器插件,这些插件可以让编辑器读取配置文件并依此格式化代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# EditorConfig helps developers define and maintain
# consistent coding styles between different editors and IDEs.
root = true
[*]
eol=lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
indent_style = space
indent_size = 2
[*.md]
trim_trailing_whitespace = false

3. webstorm配置

  1. 打开settings,搜索eslint找到eslint配置,勾选Enable,选择nodejs安装路径,选择全局eslint安装路径即可。
    image

  2. 打开settings,在keymap下搜索eslint,可以找到对应的eslint fix problem功能,右键为其添加自定义快捷键,假设是ctrl+shift+s。
    image

  3. 第二步中的keymap在webstorm中存在bug,不支持vue文件中的js自动修复规范错误,所以使用另一种方法。打开settings,搜索external tool,
    添加一个自定义工具命名为eslint,如下图完成配置,再重复第二步,但是要找到自定义的那个eslint工具进行配置快捷键。

image
image
image

注意更新最新版的webstorm

4. 使用eslint

现在已经配置好eslint了,打开项目中的js文件或者vue文件,按快捷键ctrl+shift+s即可检查规范。并自动修复一些官方声明可修复的错误

如果您觉得受益了,欢迎打赏鼓励。