前言
最近接手了一個項目，由于之前為了快速開發，沒有做代碼檢查。為了使得代碼更加規范以及更易讀，所以就要eslint上場了。
安裝依賴
安裝依賴有兩種方法：
- 在cmd中打上把相應的依賴加到devDependencies下，再npm install對應依賴。
- 在package.json文件加上相應依賴：
|
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的規則有三個選項：
- "off"或者0，不啟用這個規則
- "warn"或者1，出現問題會有警告
- "error"或者2，出現問題會報錯
在根目錄創建.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一旦發現配置文件中有 "root": true，它就會停止在父級目錄中尋找。 root: true, parserOptions: { // 對Babel解析器的包裝使其與 ESLint 兼容。 parser: 'babel-eslint', // 代碼是 ECMAScript 模塊 sourceType: 'module' }, env: { // 預定義的全局變量，這里是瀏覽器環境 browser: true, node: true, es6: true, }, // 擴展風格 extends: ['plugin:vue/recommended', 'eslint:recommended'], // 規則的細節請到ESLint官方網站查看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'], // 強制使用一致的縮進 第二個參數為 "tab" 時，會使用tab 'brace-style': [2, '1tbs', { 'allowSingleLine': true }], // 雙峰駝命名格式 'camelcase': [0, { 'properties': 'always' }], // 數組和對象鍵值對最后一個逗號， never參數：不能帶末尾的逗號, always參數：必須帶末尾的逗號 'comma-dangle': [2, 'never'], // 控制逗號前后的空格 'comma-spacing': [2, { 'before': false, 'after': true }], // 控制逗號在行尾出現還是在行首出現 (默認行尾) 'comma-style': [2, 'last'], // 強制在子類構造函數中用super()調用父類構造函數，TypeScrip的編譯器也會提示 'constructor-super': 2, // 強制所有控制語句使用一致的括號風格 'curly': [2, 'multi-line'], // 強制object.key 中 . 的位置，參數: // property，'.'號應與屬性在同一行 // object, '.' 號應與對象名在同一行 'dot-location': [2, 'property'], // 文件末尾強制換行 'eol-last': 2, // 使用 === 替代 == allow-null允許null和undefined== "eqeqeq": [2, "allow-null"], // 強制 generator 函數中 * 號周圍使用一致的空格 'generator-star-spacing': [2, { 'before': true, 'after': true }], // 要求回調函數中有容錯處理 'handle-callback-err': [2, '^(err|error)$'], 'indent': [2, 2, { 'SwitchCase': 1 }], // 強制在 JSX 屬性中一致地使用雙引號或單引號 'jsx-quotes': [2, 'prefer-single'], // 強制在對象字面量的屬性中鍵和值之間使用一致的間距 'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }], // 強制在關鍵字前后使用一致的空格 'keyword-spacing': [2, { 'before': true, 'after': true }], // 要求構造函數首字母大寫 'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }], // 要求調用無參構造函數時有圓括號 'new-parens': 2, // 禁止在沒有類型檢查操作符的情況下與 null 進行比較 'no-eq-null': 0, // 禁止使用 Array 構造函數 'no-array-constructor': 2, // 禁用 arguments.caller 或 arguments.callee 'no-caller': 2, // 禁用 console 'no-console': 0, // 禁止修改類聲明的變量 'no-class-assign': 2, // 禁止條件表達式中出現賦值操作符 'no-cond-assign': 2, // 禁止修改 const 聲明的變量 'no-const-assign': 2, // 禁止在正則表達式中使用控制字符 ：new RegExp("\x1f") 'no-control-regex': 0, // 禁止刪除變量 'no-delete-var': 2, // 禁止 function 定義中出現重名參數 'no-dupe-args': 2, // 禁止類成員中出現重復的名稱 'no-dupe-class-members': 2, // 禁止對象字面量中出現重復的 key 'no-dupe-keys': 2, // 禁止重復的 case 標簽 'no-duplicate-case': 2, // 禁止在正則表達式中使用空字符集 (/^abc[]/) 'no-empty-character-class': 2, // 禁止使用空解構模式no-empty-pattern 'no-empty-pattern': 2, // 禁用 eval()，由于多處地方使用，暫不開啟 'no-eval': 0, // 禁止對 catch 子句的參數重新賦值 'no-ex-assign': 2, // 禁止擴展原生類型 'no-extend-native': 2, // 禁止不必要的 .bind() 調用 'no-extra-bind': 2, // 禁止不必要的布爾轉換 'no-extra-boolean-cast': 2, // 禁止不必要的括號 //(a * b) + c;//報錯 'no-extra-parens': [2, 'functions'], // 禁止 case 語句落空 'no-fallthrough': 2, // 禁止數字字面量中使用前導和末尾小數點 'no-floating-decimal': 2, // 禁止對 function 聲明重新賦值 'no-func-assign': 2, // 禁止使用類似 eval() 的方法 'no-implied-eval': 2, // 禁止在嵌套的塊中出現 function 或 var 聲明 'no-inner-declarations': [2, 'functions'], // 禁止 RegExp 構造函數中無效的正則表達式字符串 'no-invalid-regexp': 2, // 禁止在字符串和注釋之外不規則的空白 '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 中，可以在新行之前使用斜線創建多行字符串 'no-multi-str': 2, // 不允許多個空行 'no-multiple-empty-lines': [2, { 'max': 1 }], // 禁止對原生對象賦值 'no-native-reassign': 2, // 禁止在 in 表達式中出現否定的左操作數 'no-negated-in-lhs': 2, // 禁止使用 Object 的構造函數 'no-new-object': 2, // 禁止調用 require 時使用 new 操作符 'no-new-require': 2, // 禁止 Symbol 的構造函數 'no-new-symbol': 2, // 禁止對 String，Number 和 Boolean 使用 new 操作符 'no-new-wrappers': 2, // 禁止把全局對象 (Math 和 JSON) 作為函數調用 錯誤：var math = Math(); 'no-obj-calls': 2, // 禁用八進制字面量 'no-octal': 2, // 禁止在字符串中使用八進制轉義序列 'no-octal-escape': 2, // 禁止對 __dirname 和 __filename進行字符串連接 'no-path-concat': 2, // 禁用 __proto__ 屬性 'no-proto': 2, // 禁止使用 var 多次聲明同一變量 'no-redeclare': 2, // 禁止正則表達式字面量中出現多個空格 '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 標識符和括號之間出現空格 'no-spaced-func': 2, // 禁用稀疏數組 'no-sparse-arrays': 2, // 禁止在構造函數中，在調用 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, // 禁止出現令人困惑的多行表達式 'no-unexpected-multiline': 2, // 禁用一成不變的循環條件 'no-unmodified-loop-condition': 2, // 禁止可以在有更簡單的可替代的表達式時使用三元操作符 'no-unneeded-ternary': [2, { 'defaultAssignment': false }], // 禁止在return、throw、continue 和 break語句之后出現不可達代碼 'no-unreachable': 2, 'no-unsafe-finally': 2, // 禁止出現未使用過的變量 'no-unused-vars': [2, { 'vars': 'all', 'args': 'none' }], // 禁止不必要的 .call() 和 .apply() 'no-useless-call': 2, // 禁止不必要的計算性能鍵對象的文字 'no-useless-computed-key': 2, 'no-useless-constructor': 2, // 禁用不必要的轉義字符 'no-useless-escape': 0, // 禁止屬性前有空白 'no-whitespace-before-property': 2, // 禁用 with 語句 'no-with': 2, // 強制函數中的變量要么一起聲明要么分開聲明 'one-var': [2, { 'initialized': 'never' }], // 強制操作符使用一致的換行符 'operator-linebreak': [2, 'after', { 'overrides': { '?': 'before', ':': 'before' } }], // 要求或禁止塊內填充 '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'], // 強制在圓括號內使用一致的空格 '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 }], // 指定數組的元素之間要以空格隔開(, 后面)， never參數：[ 之前和 ] 之后不能帶空格，always參數：[ 之前和 ] 之后必須帶空格 'array-bracket-spacing': [2, 'never'] }} |
忽略不必要的文件檢測
在根目錄下新建文件.eslintignore，對應的文件忽略檢測。
src/assets
關閉某些代碼的檢測
有時候代碼里有些特殊情況需要我們在某一行或者某幾行關閉ESLint檢測，可以使用注釋。
下面的代碼會關閉所有規則：
|
1
2
3
|
/* eslint-disable */alert('str');/* eslint-enable */ |
下面的代碼會關閉某一行的所有規則：
|
1
2
3
4
|
alert('str'); // eslint-disable-line// eslint-disable-next-linealert('str'); |
下面的代碼在某一行關閉指定的規則：
|
1
2
3
4
|
alert('str'); // eslint-disable-line no-alert// eslint-disable-next-line no-alertalert('str'); |
開啟驗證
在根目錄的vue.config.js中，把lintOnSave設置為true。
vs code安裝插件與設置
在vscode上安裝eslint和vetur插件，并在file>>prefrence>>setting 或文件>>首選項>>設置中，找到setting.json，添加如下配置，讓vscode每次保持的時候安裝eslint規范來自動格式化：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
// 重新設定tabsize"editor.tabSize": 2,// 每次保存的時候將代碼按eslint格式進行修復"eslint.autoFixOnSave": true,// 添加 vue 支持"eslint.validate": [{ "language": "vue", "autoFix": true},{ "language": "html", "autoFix": true},{ "language": "javascript", "autoFix": true}],// 每次保存的時候自動格式化（建議關掉，用eslint來修復）"editor.formatOnSave": false |
結語
本文章只是記錄eslint的過程，如果大家有什么問題可以在下方反饋給我，謝謝！
到此這篇關于vue-cli3項目配置eslint代碼規范的文章就介紹到這了,更多相關vue-cli3項目配置eslint代碼規范內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://www.cnblogs.com/wy99/p/13640124.html
