前言
最近接手了一個(gè)項(xiàng)目，由于之前為了快速開發(fā)，沒有做代碼檢查。為了使得代碼更加規(guī)范以及更易讀，所以就要eslint上場了。
安裝依賴
安裝依賴有兩種方法：
- 在cmd中打上把相應(yīng)的依賴加到devDependencies下，再npm install對(duì)應(yīng)依賴。
- 在package.json文件加上相應(yīng)依賴：
|
1
2
3
4
5
6
7
8
|
"eslint-plugin-html": "^6.0.3","@vue/cli-plugin-eslint": "^3.3.0","@vue/eslint-config-standard": "^4.0.0","eslint": "5.0.0","eslint-friendly-formatter": "4.0.1","eslint-loader": "2.0.0","eslint-plugin-import": "^2.20.2","eslint-plugin-vue": "4.7.1", |
eslint配置方法
eslint的規(guī)則有三個(gè)選項(xiàng)：
- "off"或者0，不啟用這個(gè)規(guī)則
- "warn"或者1，出現(xiàn)問題會(huì)有警告
- "error"或者2，出現(xiàn)問題會(huì)報(bào)錯(cuò)
在根目錄創(chuàng)建.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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
|
module.exports = { // 默認(rèn)情況下，ESLint會(huì)在所有父級(jí)組件中尋找配置文件，一直到根目錄。ESLint一旦發(fā)現(xiàn)配置文件中有 "root": true，它就會(huì)停止在父級(jí)目錄中尋找。 root: true, parserOptions: { // 對(duì)Babel解析器的包裝使其與 ESLint 兼容。 parser: 'babel-eslint', // 代碼是 ECMAScript 模塊 sourceType: 'module' }, env: { // 預(yù)定義的全局變量，這里是瀏覽器環(huán)境 browser: true, node: true, es6: true, }, // 擴(kuò)展風(fēng)格 extends: ['plugin:vue/recommended', 'eslint:recommended'], // 規(guī)則的細(xì)節(jié)請(qǐng)到ESLint官方網(wǎng)站查看http://eslint.org/docs/rules/ rules: { "vue/max-attributes-per-line": [2, { "singleline": 10, "multiline": { "max": 1, "allowFirstLine": false } }], "vue/name-property-casing": ["error", "PascalCase"], // 定義對(duì)象的set存取器屬性時(shí)，強(qiáng)制定義get 'accessor-pairs': 2, 'arrow-spacing': [2, { 'before': true, 'after': true }], // 禁止或強(qiáng)制在單行代碼塊中使用空格 'block-spacing': [2, 'always'], // 強(qiáng)制使用一致的縮進(jìn) 第二個(gè)參數(shù)為 "tab" 時(shí)，會(huì)使用tab 'brace-style': [2, '1tbs', { 'allowSingleLine': true }], // 雙峰駝命名格式 'camelcase': [0, { 'properties': 'always' }], // 數(shù)組和對(duì)象鍵值對(duì)最后一個(gè)逗號(hào)， never參數(shù)：不能帶末尾的逗號(hào), always參數(shù)：必須帶末尾的逗號(hào) 'comma-dangle': [2, 'never'], // 控制逗號(hào)前后的空格 'comma-spacing': [2, { 'before': false, 'after': true }], // 控制逗號(hào)在行尾出現(xiàn)還是在行首出現(xiàn) (默認(rèn)行尾) 'comma-style': [2, 'last'], // 強(qiáng)制在子類構(gòu)造函數(shù)中用super()調(diào)用父類構(gòu)造函數(shù)，TypeScrip的編譯器也會(huì)提示 'constructor-super': 2, // 強(qiáng)制所有控制語句使用一致的括號(hào)風(fēng)格 'curly': [2, 'multi-line'], // 強(qiáng)制object.key 中 . 的位置，參數(shù): // property，'.'號(hào)應(yīng)與屬性在同一行 // object, '.' 號(hào)應(yīng)與對(duì)象名在同一行 'dot-location': [2, 'property'], // 文件末尾強(qiáng)制換行 'eol-last': 2, // 使用 === 替代 == allow-null允許null和undefined== "eqeqeq": [2, "allow-null"], // 強(qiáng)制 generator 函數(shù)中 * 號(hào)周圍使用一致的空格 'generator-star-spacing': [2, { 'before': true, 'after': true }], // 要求回調(diào)函數(shù)中有容錯(cuò)處理 'handle-callback-err': [2, '^(err|error)$'], 'indent': [2, 2, { 'SwitchCase': 1 }], // 強(qiáng)制在 JSX 屬性中一致地使用雙引號(hào)或單引號(hào) 'jsx-quotes': [2, 'prefer-single'], // 強(qiáng)制在對(duì)象字面量的屬性中鍵和值之間使用一致的間距 'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }], // 強(qiáng)制在關(guān)鍵字前后使用一致的空格 'keyword-spacing': [2, { 'before': true, 'after': true }], // 要求構(gòu)造函數(shù)首字母大寫 'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }], // 要求調(diào)用無參構(gòu)造函數(shù)時(shí)有圓括號(hào) 'new-parens': 2, // 禁止在沒有類型檢查操作符的情況下與 null 進(jìn)行比較 'no-eq-null': 0, // 禁止使用 Array 構(gòu)造函數(shù) 'no-array-constructor': 2, // 禁用 arguments.caller 或 arguments.callee 'no-caller': 2, // 禁用 console 'no-console': 0, // 禁止修改類聲明的變量 'no-class-assign': 2, // 禁止條件表達(dá)式中出現(xiàn)賦值操作符 'no-cond-assign': 2, // 禁止修改 const 聲明的變量 'no-const-assign': 2, // 禁止在正則表達(dá)式中使用控制字符 ：new RegExp("\x1f") 'no-control-regex': 0, // 禁止刪除變量 'no-delete-var': 2, // 禁止 function 定義中出現(xiàn)重名參數(shù) 'no-dupe-args': 2, // 禁止類成員中出現(xiàn)重復(fù)的名稱 'no-dupe-class-members': 2, // 禁止對(duì)象字面量中出現(xiàn)重復(fù)的 key 'no-dupe-keys': 2, // 禁止重復(fù)的 case 標(biāo)簽 'no-duplicate-case': 2, // 禁止在正則表達(dá)式中使用空字符集 (/^abc[]/) 'no-empty-character-class': 2, // 禁止使用空解構(gòu)模式no-empty-pattern 'no-empty-pattern': 2, // 禁用 eval()，由于多處地方使用，暫不開啟 'no-eval': 0, // 禁止對(duì) catch 子句的參數(shù)重新賦值 'no-ex-assign': 2, // 禁止擴(kuò)展原生類型 'no-extend-native': 2, // 禁止不必要的 .bind() 調(diào)用 'no-extra-bind': 2, // 禁止不必要的布爾轉(zhuǎn)換 'no-extra-boolean-cast': 2, // 禁止不必要的括號(hào) //(a * b) + c;//報(bào)錯(cuò) 'no-extra-parens': [2, 'functions'], // 禁止 case 語句落空 'no-fallthrough': 2, // 禁止數(shù)字字面量中使用前導(dǎo)和末尾小數(shù)點(diǎn) 'no-floating-decimal': 2, // 禁止對(duì) function 聲明重新賦值 'no-func-assign': 2, // 禁止使用類似 eval() 的方法 'no-implied-eval': 2, // 禁止在嵌套的塊中出現(xiàn) function 或 var 聲明 'no-inner-declarations': [2, 'functions'], // 禁止 RegExp 構(gòu)造函數(shù)中無效的正則表達(dá)式字符串 'no-invalid-regexp': 2, // 禁止在字符串和注釋之外不規(guī)則的空白 'no-irregular-whitespace': 2, // 禁用 __iterator__ 屬性 'no-iterator': 2, // 不允許標(biāo)簽與變量同名 'no-label-var': 2, // 禁用標(biāo)簽語句 'no-labels': [2, { 'allowLoop': false, 'allowSwitch': false }], // 禁用不必要的嵌套塊 'no-lone-blocks': 2, // 不允許空格和 tab 混合縮進(jìn) 'no-mixed-spaces-and-tabs': 2, // 禁止使用多個(gè)空格 'no-multi-spaces': 2, // 禁止使用多行字符串，在 JavaScript 中，可以在新行之前使用斜線創(chuàng)建多行字符串 'no-multi-str': 2, // 不允許多個(gè)空行 'no-multiple-empty-lines': [2, { 'max': 1 }], // 禁止對(duì)原生對(duì)象賦值 'no-native-reassign': 2, // 禁止在 in 表達(dá)式中出現(xiàn)否定的左操作數(shù) 'no-negated-in-lhs': 2, // 禁止使用 Object 的構(gòu)造函數(shù) 'no-new-object': 2, // 禁止調(diào)用 require 時(shí)使用 new 操作符 'no-new-require': 2, // 禁止 Symbol 的構(gòu)造函數(shù) 'no-new-symbol': 2, // 禁止對(duì) String，Number 和 Boolean 使用 new 操作符 'no-new-wrappers': 2, // 禁止把全局對(duì)象 (Math 和 JSON) 作為函數(shù)調(diào)用 錯(cuò)誤：var math = Math(); 'no-obj-calls': 2, // 禁用八進(jìn)制字面量 'no-octal': 2, // 禁止在字符串中使用八進(jìn)制轉(zhuǎn)義序列 'no-octal-escape': 2, // 禁止對(duì) __dirname 和 __filename進(jìn)行字符串連接 'no-path-concat': 2, // 禁用 __proto__ 屬性 'no-proto': 2, // 禁止使用 var 多次聲明同一變量 'no-redeclare': 2, // 禁止正則表達(dá)式字面量中出現(xiàn)多個(gè)空格 'no-regex-spaces': 2, // 禁用指定的通過 require 加載的模塊 'no-return-assign': [2, 'except-parens'], // 禁止自我賦值 'no-self-assign': 2, // 禁止自身比較 'no-self-compare': 2, // 禁用逗號(hào)操作符 'no-sequences': 2, // 禁止覆蓋受限制的標(biāo)識(shí)符 'no-shadow-restricted-names': 2, // 禁止 function 標(biāo)識(shí)符和括號(hào)之間出現(xiàn)空格 'no-spaced-func': 2, // 禁用稀疏數(shù)組 'no-sparse-arrays': 2, // 禁止在構(gòu)造函數(shù)中，在調(diào)用 super() 之前使用 this 或 super 'no-this-before-super': 2, // 禁止拋出非異常字面量 'no-throw-literal': 0, // 禁用行尾空格 'no-trailing-spaces': 2, // 禁用未聲明的變量，除非它們在 /*global */ 注釋中被提到 'no-undef': 2, // 禁止將變量初始化為 undefined 'no-undef-init': 2, // 禁止出現(xiàn)令人困惑的多行表達(dá)式 'no-unexpected-multiline': 2, // 禁用一成不變的循環(huán)條件 'no-unmodified-loop-condition': 2, // 禁止可以在有更簡單的可替代的表達(dá)式時(shí)使用三元操作符 'no-unneeded-ternary': [2, { 'defaultAssignment': false }], // 禁止在return、throw、continue 和 break語句之后出現(xiàn)不可達(dá)代碼 'no-unreachable': 2, 'no-unsafe-finally': 2, // 禁止出現(xiàn)未使用過的變量 'no-unused-vars': [2, { 'vars': 'all', 'args': 'none' }], // 禁止不必要的 .call() 和 .apply() 'no-useless-call': 2, // 禁止不必要的計(jì)算性能鍵對(duì)象的文字 'no-useless-computed-key': 2, 'no-useless-constructor': 2, // 禁用不必要的轉(zhuǎn)義字符 'no-useless-escape': 0, // 禁止屬性前有空白 'no-whitespace-before-property': 2, // 禁用 with 語句 'no-with': 2, // 強(qiáng)制函數(shù)中的變量要么一起聲明要么分開聲明 'one-var': [2, { 'initialized': 'never' }], // 強(qiáng)制操作符使用一致的換行符 'operator-linebreak': [2, 'after', { 'overrides': { '?': 'before', ':': 'before' } }], // 要求或禁止塊內(nèi)填充 'padded-blocks': [2, 'never'], // 強(qiáng)制使用一致的反勾號(hào)、雙引號(hào)或單引號(hào) 'quotes': [2, 'single', { 'avoidEscape': true, 'allowTemplateLiterals': true }], // 要求或禁止使用分號(hào)而不是 ASI（這個(gè)才是控制行尾部分號(hào)的，） 'semi': [2, 'never'], // 強(qiáng)制分號(hào)之前和之后使用一致的空格 'semi-spacing': [2, { 'before': false, 'after': true }], // 強(qiáng)制在塊之前使用一致的空格 'space-before-blocks': [2, 'always'], // 強(qiáng)制在 function的左括號(hào)之前使用一致的空格 'space-before-function-paren': [2, 'never'], // 強(qiáng)制在圓括號(hào)內(nèi)使用一致的空格 'space-in-parens': [2, 'never'], // 要求操作符周圍有空格 'space-infix-ops': 2, // 強(qiáng)制在一元操作符前后使用一致的空格 'space-unary-ops': [2, { 'words': true, 'nonwords': false }], // 強(qiáng)制在注釋中 // 或 /* 使用一致的空格 'spaced-comment': [2, 'always', { 'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] }], // 要求或禁止模板字符串中的嵌入表達(dá)式周圍空格的使用 'template-curly-spacing': [2, 'never'], // 要求使用 isNaN() 檢查 NaN 'use-isnan': 2, // typeof foo === "undefimed" 錯(cuò)誤 'valid-typeof': 2, // 要求 IIFE 使用括號(hào)括起來 'wrap-iife': [2, 'any'], // 強(qiáng)制在 yield* 表達(dá)式中 * 周圍使用空格 'yield-star-spacing': [2, 'both'], // 要求或禁止 “Yoda” 條件 'yoda': [2, 'never'], // 要求使用 const 聲明那些聲明后不再被修改的變量 'prefer-const': 2, // 是否允許debugger 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, // 強(qiáng)制在花括號(hào)中使用一致的空格 'object-curly-spacing': [2, 'always', { objectsInObjects: false }], // 指定數(shù)組的元素之間要以空格隔開(, 后面)， never參數(shù)：[ 之前和 ] 之后不能帶空格，always參數(shù)：[ 之前和 ] 之后必須帶空格 'array-bracket-spacing': [2, 'never'] }} |
忽略不必要的文件檢測
在根目錄下新建文件.eslintignore，對(duì)應(yīng)的文件忽略檢測。
src/assets
關(guān)閉某些代碼的檢測
有時(shí)候代碼里有些特殊情況需要我們在某一行或者某幾行關(guān)閉ESLint檢測，可以使用注釋。
下面的代碼會(huì)關(guān)閉所有規(guī)則：
|
1
2
3
|
/* eslint-disable */alert('str');/* eslint-enable */ |
下面的代碼會(huì)關(guān)閉某一行的所有規(guī)則：
|
1
2
3
4
|
alert('str'); // eslint-disable-line// eslint-disable-next-linealert('str'); |
下面的代碼在某一行關(guān)閉指定的規(guī)則：
|
1
2
3
4
|
alert('str'); // eslint-disable-line no-alert// eslint-disable-next-line no-alertalert('str'); |
開啟驗(yàn)證
在根目錄的vue.config.js中，把lintOnSave設(shè)置為true。
vs code安裝插件與設(shè)置
在vscode上安裝eslint和vetur插件，并在file>>prefrence>>setting 或文件>>首選項(xiàng)>>設(shè)置中，找到setting.json，添加如下配置，讓vscode每次保持的時(shí)候安裝eslint規(guī)范來自動(dòng)格式化：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
// 重新設(shè)定tabsize"editor.tabSize": 2,// 每次保存的時(shí)候?qū)⒋a按eslint格式進(jìn)行修復(fù)"eslint.autoFixOnSave": true,// 添加 vue 支持"eslint.validate": [{ "language": "vue", "autoFix": true},{ "language": "html", "autoFix": true},{ "language": "javascript", "autoFix": true}],// 每次保存的時(shí)候自動(dòng)格式化（建議關(guān)掉，用eslint來修復(fù)）"editor.formatOnSave": false |
結(jié)語
本文章只是記錄eslint的過程，如果大家有什么問題可以在下方反饋給我，謝謝！
到此這篇關(guān)于vue-cli3項(xiàng)目配置eslint代碼規(guī)范的文章就介紹到這了,更多相關(guān)vue-cli3項(xiàng)目配置eslint代碼規(guī)范內(nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://www.cnblogs.com/wy99/p/13640124.html
