前言
最近接手了一個項目，由于之前為了快速開發(fā)，沒有做代碼檢查。為了使得代碼更加規(guī)范以及更易讀，所以就要eslint上場了。
安裝依賴
安裝依賴有兩種方法：
- 在cmd中打上把相應(yīng)的依賴加到devDependencies下，再npm install對應(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ī)則有三個選項：
- "off"或者0，不啟用這個規(guī)則
- "warn"或者1，出現(xiàn)問題會有警告
- "error"或者2，出現(xiàn)問題會報錯
在根目錄創(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 = { // 默認情況下，ESLint會在所有父級組件中尋找配置文件，一直到根目錄。ESLint一旦發(fā)現(xiàn)配置文件中有 "root": true，它就會停止在父級目錄中尋找。 root: true, parserOptions: { // 對Babel解析器的包裝使其與 ESLint 兼容。 parser: 'babel-eslint', // 代碼是 ECMAScript 模塊 sourceType: 'module' }, env: { // 預(yù)定義的全局變量，這里是瀏覽器環(huán)境 browser: true, node: true, es6: true, }, // 擴展風(fēng)格 extends: ['plugin:vue/recommended', 'eslint:recommended'], // 規(guī)則的細節(jié)請到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"], // 定義對象的set存取器屬性時，強制定義get 'accessor-pairs': 2, 'arrow-spacing': [2, { 'before': true, 'after': true }], // 禁止或強制在單行代碼塊中使用空格 'block-spacing': [2, 'always'], // 強制使用一致的縮進 第二個參數(shù)為 "tab" 時，會使用tab 'brace-style': [2, '1tbs', { 'allowSingleLine': true }], // 雙峰駝命名格式 'camelcase': [0, { 'properties': 'always' }], // 數(shù)組和對象鍵值對最后一個逗號， never參數(shù)：不能帶末尾的逗號, always參數(shù)：必須帶末尾的逗號 'comma-dangle': [2, 'never'], // 控制逗號前后的空格 'comma-spacing': [2, { 'before': false, 'after': true }], // 控制逗號在行尾出現(xiàn)還是在行首出現(xiàn) (默認行尾) 'comma-style': [2, 'last'], // 強制在子類構(gòu)造函數(shù)中用super()調(diào)用父類構(gòu)造函數(shù)，TypeScrip的編譯器也會提示 'constructor-super': 2, // 強制所有控制語句使用一致的括號風(fēng)格 'curly': [2, 'multi-line'], // 強制object.key 中 . 的位置，參數(shù): // property，'.'號應(yīng)與屬性在同一行 // object, '.' 號應(yīng)與對象名在同一行 'dot-location': [2, 'property'], // 文件末尾強制換行 'eol-last': 2, // 使用 === 替代 == allow-null允許null和undefined== "eqeqeq": [2, "allow-null"], // 強制 generator 函數(shù)中 * 號周圍使用一致的空格 'generator-star-spacing': [2, { 'before': true, 'after': true }], // 要求回調(diào)函數(shù)中有容錯處理 'handle-callback-err': [2, '^(err|error)$'], 'indent': [2, 2, { 'SwitchCase': 1 }], // 強制在 JSX 屬性中一致地使用雙引號或單引號 'jsx-quotes': [2, 'prefer-single'], // 強制在對象字面量的屬性中鍵和值之間使用一致的間距 'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }], // 強制在關(guān)鍵字前后使用一致的空格 'keyword-spacing': [2, { 'before': true, 'after': true }], // 要求構(gòu)造函數(shù)首字母大寫 'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }], // 要求調(diào)用無參構(gòu)造函數(shù)時有圓括號 'new-parens': 2, // 禁止在沒有類型檢查操作符的情況下與 null 進行比較 '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, // 禁止條件表達式中出現(xiàn)賦值操作符 'no-cond-assign': 2, // 禁止修改 const 聲明的變量 'no-const-assign': 2, // 禁止在正則表達式中使用控制字符 ：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, // 禁止對象字面量中出現(xiàn)重復(fù)的 key 'no-dupe-keys': 2, // 禁止重復(fù)的 case 標簽 'no-duplicate-case': 2, // 禁止在正則表達式中使用空字符集 (/^abc[]/) 'no-empty-character-class': 2, // 禁止使用空解構(gòu)模式no-empty-pattern 'no-empty-pattern': 2, // 禁用 eval()，由于多處地方使用，暫不開啟 'no-eval': 0, // 禁止對 catch 子句的參數(shù)重新賦值 'no-ex-assign': 2, // 禁止擴展原生類型 'no-extend-native': 2, // 禁止不必要的 .bind() 調(diào)用 'no-extra-bind': 2, // 禁止不必要的布爾轉(zhuǎn)換 'no-extra-boolean-cast': 2, // 禁止不必要的括號 //(a * b) + c;//報錯 'no-extra-parens': [2, 'functions'], // 禁止 case 語句落空 'no-fallthrough': 2, // 禁止數(shù)字字面量中使用前導(dǎo)和末尾小數(shù)點 'no-floating-decimal': 2, // 禁止對 function 聲明重新賦值 'no-func-assign': 2, // 禁止使用類似 eval() 的方法 'no-implied-eval': 2, // 禁止在嵌套的塊中出現(xiàn) function 或 var 聲明 'no-inner-declarations': [2, 'functions'], // 禁止 RegExp 構(gòu)造函數(shù)中無效的正則表達式字符串 'no-invalid-regexp': 2, // 禁止在字符串和注釋之外不規(guī)則的空白 'no-irregular-whitespace': 2, // 禁用 __iterator__ 屬性 'no-iterator': 2, // 不允許標簽與變量同名 'no-label-var': 2, // 禁用標簽語句 'no-labels': [2, { 'allowLoop': false, 'allowSwitch': false }], // 禁用不必要的嵌套塊 'no-lone-blocks': 2, // 不允許空格和 tab 混合縮進 'no-mixed-spaces-and-tabs': 2, // 禁止使用多個空格 'no-multi-spaces': 2, // 禁止使用多行字符串，在 JavaScript 中，可以在新行之前使用斜線創(chuàng)建多行字符串 'no-multi-str': 2, // 不允許多個空行 'no-multiple-empty-lines': [2, { 'max': 1 }], // 禁止對原生對象賦值 'no-native-reassign': 2, // 禁止在 in 表達式中出現(xiàn)否定的左操作數(shù) 'no-negated-in-lhs': 2, // 禁止使用 Object 的構(gòu)造函數(shù) 'no-new-object': 2, // 禁止調(diào)用 require 時使用 new 操作符 'no-new-require': 2, // 禁止 Symbol 的構(gòu)造函數(shù) 'no-new-symbol': 2, // 禁止對 String，Number 和 Boolean 使用 new 操作符 'no-new-wrappers': 2, // 禁止把全局對象 (Math 和 JSON) 作為函數(shù)調(diào)用 錯誤：var math = Math(); 'no-obj-calls': 2, // 禁用八進制字面量 'no-octal': 2, // 禁止在字符串中使用八進制轉(zhuǎn)義序列 'no-octal-escape': 2, // 禁止對 __dirname 和 __filename進行字符串連接 'no-path-concat': 2, // 禁用 __proto__ 屬性 'no-proto': 2, // 禁止使用 var 多次聲明同一變量 'no-redeclare': 2, // 禁止正則表達式字面量中出現(xiàn)多個空格 'no-regex-spaces': 2, // 禁用指定的通過 require 加載的模塊 'no-return-assign': [2, 'except-parens'], // 禁止自我賦值 'no-self-assign': 2, // 禁止自身比較 'no-self-compare': 2, // 禁用逗號操作符 'no-sequences': 2, // 禁止覆蓋受限制的標識符 'no-shadow-restricted-names': 2, // 禁止 function 標識符和括號之間出現(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)令人困惑的多行表達式 'no-unexpected-multiline': 2, // 禁用一成不變的循環(huán)條件 'no-unmodified-loop-condition': 2, // 禁止可以在有更簡單的可替代的表達式時使用三元操作符 'no-unneeded-ternary': [2, { 'defaultAssignment': false }], // 禁止在return、throw、continue 和 break語句之后出現(xiàn)不可達代碼 'no-unreachable': 2, 'no-unsafe-finally': 2, // 禁止出現(xiàn)未使用過的變量 'no-unused-vars': [2, { 'vars': 'all', 'args': 'none' }], // 禁止不必要的 .call() 和 .apply() 'no-useless-call': 2, // 禁止不必要的計算性能鍵對象的文字 'no-useless-computed-key': 2, 'no-useless-constructor': 2, // 禁用不必要的轉(zhuǎn)義字符 'no-useless-escape': 0, // 禁止屬性前有空白 'no-whitespace-before-property': 2, // 禁用 with 語句 'no-with': 2, // 強制函數(shù)中的變量要么一起聲明要么分開聲明 'one-var': [2, { 'initialized': 'never' }], // 強制操作符使用一致的換行符 'operator-linebreak': [2, 'after', { 'overrides': { '?': 'before', ':': 'before' } }], // 要求或禁止塊內(nèi)填充 'padded-blocks': [2, 'never'], // 強制使用一致的反勾號、雙引號或單引號 'quotes': [2, 'single', { 'avoidEscape': true, 'allowTemplateLiterals': true }], // 要求或禁止使用分號而不是 ASI（這個才是控制行尾部分號的，） 'semi': [2, 'never'], // 強制分號之前和之后使用一致的空格 'semi-spacing': [2, { 'before': false, 'after': true }], // 強制在塊之前使用一致的空格 'space-before-blocks': [2, 'always'], // 強制在 function的左括號之前使用一致的空格 'space-before-function-paren': [2, 'never'], // 強制在圓括號內(nèi)使用一致的空格 'space-in-parens': [2, 'never'], // 要求操作符周圍有空格 'space-infix-ops': 2, // 強制在一元操作符前后使用一致的空格 'space-unary-ops': [2, { 'words': true, 'nonwords': false }], // 強制在注釋中 // 或 /* 使用一致的空格 'spaced-comment': [2, 'always', { 'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] }], // 要求或禁止模板字符串中的嵌入表達式周圍空格的使用 'template-curly-spacing': [2, 'never'], // 要求使用 isNaN() 檢查 NaN 'use-isnan': 2, // typeof foo === "undefimed" 錯誤 'valid-typeof': 2, // 要求 IIFE 使用括號括起來 'wrap-iife': [2, 'any'], // 強制在 yield* 表達式中 * 周圍使用空格 'yield-star-spacing': [2, 'both'], // 要求或禁止 “Yoda” 條件 'yoda': [2, 'never'], // 要求使用 const 聲明那些聲明后不再被修改的變量 'prefer-const': 2, // 是否允許debugger 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, // 強制在花括號中使用一致的空格 'object-curly-spacing': [2, 'always', { objectsInObjects: false }], // 指定數(shù)組的元素之間要以空格隔開(, 后面)， never參數(shù)：[ 之前和 ] 之后不能帶空格，always參數(shù)：[ 之前和 ] 之后必須帶空格 'array-bracket-spacing': [2, 'never'] }} |
忽略不必要的文件檢測
在根目錄下新建文件.eslintignore，對應(yīng)的文件忽略檢測。
src/assets
關(guān)閉某些代碼的檢測
有時候代碼里有些特殊情況需要我們在某一行或者某幾行關(guān)閉ESLint檢測，可以使用注釋。
下面的代碼會關(guān)閉所有規(guī)則：
|
1
2
3
|
/* eslint-disable */alert('str');/* eslint-enable */ |
下面的代碼會關(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'); |
開啟驗證
在根目錄的vue.config.js中，把lintOnSave設(shè)置為true。
vs code安裝插件與設(shè)置
在vscode上安裝eslint和vetur插件，并在file>>prefrence>>setting 或文件>>首選項>>設(shè)置中，找到setting.json，添加如下配置，讓vscode每次保持的時候安裝eslint規(guī)范來自動格式化：
|
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,// 每次保存的時候?qū)⒋a按eslint格式進行修復(fù)"eslint.autoFixOnSave": true,// 添加 vue 支持"eslint.validate": [{ "language": "vue", "autoFix": true},{ "language": "html", "autoFix": true},{ "language": "javascript", "autoFix": true}],// 每次保存的時候自動格式化（建議關(guān)掉，用eslint來修復(fù)）"editor.formatOnSave": false |
結(jié)語
本文章只是記錄eslint的過程，如果大家有什么問題可以在下方反饋給我，謝謝！
到此這篇關(guān)于vue-cli3項目配置eslint代碼規(guī)范的文章就介紹到這了,更多相關(guān)vue-cli3項目配置eslint代碼規(guī)范內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://www.cnblogs.com/wy99/p/13640124.html
