0%

VSCode ESLint JS代码静态检测工具

作者:李旭光
引用请标明出处

前言

VSCode是新一代IDE,方便灵活的插件安装方式让它强大无比,对前端友好,让它成为了越来越多前端开发者的首选IDE,编辑器虽好,但是要自己安装符合自己需求的插件才行,下面介绍一款插件,名叫ESLint,是用来静态检测js代码的工具,让你的js代码在编辑过程中就能找到错误,提高代码质量,好了废话不多说下面介绍如何安装和配置这款插件。

安装ESLint插件

打开VSCode编辑器,在左侧右下角有一个安装插件的图标,点击后就可以打开插件市场,输入ESLint,就会有个黄色的图标出现在你面前,不用犹豫双击它,稍等一会它就安装完了,是不是超简单。

安装NPM依赖

ESLint插件运行需要一些依赖,对于用过npm包管理工具的人来讲小意思啦,我把代码放到下面,需要的直接粘贴运行就好。

1
2
3
4
5
6
7
8
//全局安装eslint
npm i eslint -g

//如果用到html中的js校验
npm i eslint-plugin-html -g

//如果用到es2015语法
npm i babel-eslint -g

配置eslint配置文件到项目根目录

配置文件名称如下:
eslintrc.json
内容为:

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
{
"plugins": [
// "react",
"html"
],
"env": {
"node": true,
"jquery": true,
"es6": true,
"browser": true
},
"globals": {
"angular": false
},
"parser": "babel-eslint",
"rules": {
//官方文档 http://eslint.org/docs/rules/
//参数:0 关闭,1 警告,2 错误
// "quotes": [0, "single"], //建议使用单引号
// "no-inner-declarations": [0, "both"], //不建议在{}代码块内部声明变量或函数
"no-extra-boolean-cast": 1, //多余的感叹号转布尔型
"no-extra-semi": 1, //多余的分号
"no-extra-parens": 0, //多余的括号
"no-empty": 1, //空代码块

//使用前未定义
"no-use-before-define": [
0,
"nofunc"
],

"complexity": [0, 10], //圈复杂度大于*

//定义数组或对象最后多余的逗号
"comma-dangle": [
0,
"never"
],

// 不允许对全局变量赋值,如 window = 'abc'
"no-global-assign": ["error", {
// 定义例外
// "exceptions": ["Object"]
}],
"no-var": 0, //用let或const替代var
"no-const-assign": 2, //不允许const重新赋值
"no-class-assign": 2, //不允许对class重新赋值
"no-debugger": 1, //debugger 调试代码未删除
"no-console": 0, //console 未删除
"no-constant-condition": 2, //常量作为条件
"no-dupe-args": 2, //参数重复
"no-dupe-keys": 2, //对象属性重复
"no-duplicate-case": 2, //case重复
"no-empty-character-class": 2, //正则无法匹配任何值
"no-invalid-regexp": 2, //无效的正则
"no-func-assign": 2, //函数被赋值
"valid-typeof": 1, //无效的类型判断
"no-unreachable": 2, //不可能执行到的代码
"no-unexpected-multiline": 2, //行尾缺少分号可能导致一些意外情况
"no-sparse-arrays": 1, //数组中多出逗号
"no-shadow-restricted-names": 2, //关键词与命名冲突
"no-undef": 1, //变量未定义
"no-unused-vars": 1, //变量定义后未使用
"no-cond-assign": 2, //条件语句中禁止赋值操作
"no-native-reassign": 2, //禁止覆盖原生对象
"no-mixed-spaces-and-tabs": 0,



//代码风格优化 --------------------------------------
"no-irregular-whitespace": 0,
"no-else-return": 0, //在else代码块中return,else是多余的
"no-multi-spaces": 0, //不允许多个空格

//object直接量建议写法 : 后一个空格前面不留空格
"key-spacing": [
0,
{
"beforeColon": false,
"afterColon": true
}
],

"block-scoped-var": 1, //变量应在外部上下文中声明,不应在{}代码块中
"consistent-return": 1, //函数返回值可能是不同类型
"accessor-pairs": 1, //object getter/setter方法需要成对出现

//换行调用对象方法 点操作符应写在行首
"dot-location": [
1,
"property"
],
"no-lone-blocks": 1, //多余的{}嵌套
"no-labels": 1, //无用的标记
"no-extend-native": 1, //禁止扩展原生对象
"no-floating-decimal": 1, //浮点型需要写全 禁止.1 或 2.写法
"no-loop-func": 1, //禁止在循环体中定义函数
"no-new-func": 1, //禁止new Function(...) 写法
"no-self-compare": 1, //不允与自己比较作为条件
"no-sequences": 1, //禁止可能导致结果不明确的逗号操作符
"no-throw-literal": 1, //禁止抛出一个直接量 应是Error对象

//不允return时有赋值操作
"no-return-assign": [
1,
"always"
],

//不允许重复声明
"no-redeclare": [
1,
{
"builtinGlobals": true
}
],

//不执行的表达式
"no-unused-expressions": [
0,
{
"allowShortCircuit": true,
"allowTernary": true
}
],
"no-useless-call": 1, //无意义的函数call或apply
"no-useless-concat": 1, //无意义的string concat
"no-void": 1, //禁用void
"no-with": 1, //禁用with
"space-infix-ops": 0, //操作符前后空格

//jsdoc
"valid-jsdoc": [
0,
{
"requireParamDescription": true,
"requireReturnDescription": true
}
],

//标记未写注释
"no-warning-comments": [
1,
{
"terms": [
"todo",
"fixme",
"any other term"
],
"location": "anywhere"
}
],
"curly": 0 //if、else、while、for代码块用{}包围
}
}

eslint就是根据这个配置表来进行js语法校验的。

最后重启VSCode完成插件安装

重启后控制台显示ESLint server is running说明插件已经生效,好啦接下来就愉快的写代码吧。

如果觉得不错请支持作者
------ 版权声明 ------

本文标题:VSCode ESLint JS代码静态检测工具

文章作者:

发布时间:2017年10月12日 - 14:42

最后更新:2023年09月20日 - 10:25

原始链接:https://blog.lifesli.com/2017/10/12/VSCode-ESLint/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。