原貼
https://www.jb51.net/article/148878.htm
以下是對.editorconfig、.eslintignore、.eslintrc.js 文件進行詳細解釋
.editorconfig文件（主要用於配置IDE）
規范縮進風格，縮進大小，tab長度以及字符集等,解決不同IDE的編碼范設置。EditorConfig 插件會去查找當前編輯文件的所在文件夾或其上級文件夾中是否有 .editorconfig 文件。如果有，則編輯器的行為會與 .editorconfig 文件中定義的一致，並且其優先級高於編輯器自身的設置。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
root = true
# 對所有文件有效 //[*js]只對js文件有效
[*]
#設置編碼格式
charset = utf-8
#縮進類型 可選space和tab
indent_style = space
#縮進數量可選整數值2 or 4,或者tab
indent_size = 2
#換行符的格式
end_of_line = lf
# 是否在文件的最后插入一個空行 可選true和false
insert_final_newline = true
# 是否刪除行尾的空格 可選擇true和false
trim_trailing_whitespace = true
|
.eslintignore文件（放置需要ESLint忽略的文件，只對.js文件有效）
|
1
2
3
4
5
|
/build/
/config/
/dist/
/src/utils/
/src/router/*.js
|
.eslintrc.js 文件(用來配置ESLint的檢查規則)
|
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
|
module.exports = {
//此項是用來告訴eslint找當前配置文件不能往父級查找
root:
true
,
//此項是用來指定eslint解析器的，解析器必須符合規則，babel-eslint解析器是對babel解析器的包裝使其與ESLint解析
parser:
'babel-eslint'
,
//此項是用來指定javaScript語言類型和風格，sourceType用來指定js導入的方式，默認是script，此處設置為module，指某塊導入方式
parserOptions: {
sourceType:
'module'
},
//此項指定環境的全局變量，下面的配置指定為瀏覽器環境
env: {
browser:
true
,
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
// 此項是用來配置標准的js風格，就是說寫代碼的時候要規范的寫，如果你使用vs-code我覺得應該可以避免出錯
extends:
'standard'
,
// required to lint *.vue files
// 此項是用來提供插件的，插件名稱省略了eslint-plugin-，下面這個配置是用來規范html的
plugins: [
'html'
],
// add your custom rules here
// 下面這些rules是用來設置從插件來的規范代碼的規則，使用必須去掉前綴eslint-plugin-
// 主要有如下的設置規則，可以設置字符串也可以設置數字，兩者效果一致
// "off" -> 0 關閉規則
// "warn" -> 1 開啟警告規則
//"error" -> 2 開啟錯誤規則
// 了解了上面這些，下面這些代碼相信也看的明白了
rules: {
// allow async-await
'generator-star-spacing'
:
'off'
,
// allow debugger during development
'no-debugger'
: process.env.NODE_ENV ===
'production'
?
'error'
:
'off'
,
// js語句結尾必須使用分號
'semi'
: [
'off'
,
'always'
],
// 三等號
'eqeqeq'
: 0,
// 強制在注釋中 // 或 /* 使用一致的空格
'spaced-comment'
: 0,
// 關鍵字后面使用一致的空格
'keyword-spacing'
: 0,
// 強制在 function的左括號之前使用一致的空格
'space-before-function-paren'
: 0,
// 引號類型
"quotes"
: [0,
"single"
],
// 禁止出現未使用過的變量
// 'no-unused-vars': 0,
// 要求或禁止末尾逗號
'comma-dangle'
: 0
}
}
|
- “off” 或 0 - 關閉規則
- “warn” 或 1 - 開啟規則
- “error” 或 2 - 開啟規則
如何在老項目中加入ESlint
1. 在目錄中添加.editorconfig、.eslintrc.js、.eslintignore這三個文件
2. 在package.json的”devDependencies”中加入ESlint所需要的包
|
1
2
3
4
5
6
7
8
9
10
|
"babel-eslint"
:
"^7.1.1"
,
"eslint"
:
"^3.19.0"
,
"eslint-config-standard"
:
"^10.2.1"
,
"eslint-friendly-formatter"
:
"^3.0.0"
,
"eslint-loader"
:
"^1.7.1"
,
"eslint-plugin-html"
:
"^3.0.0"
,
"eslint-plugin-import"
:
"^2.7.0"
,
"eslint-plugin-node"
:
"^5.2.0"
,
"eslint-plugin-promise"
:
"^3.4.0"
,
"eslint-plugin-standard"
:
"^3.0.1"
,
|
3. 在bulid/webpack.base.conf.js文件中加入ESlint規則並生效
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// 在module的rules中加入
module: {
rules: [
{
test: /\.(js|vue)$/,
loader:
'eslint-loader'
,
enforce:
'pre'
,
include: [resolve(
'src'
), resolve(
'test'
)],
options: {
formatter: require(
'eslint-friendly-formatter'
),
// 不符合Eslint規則時只警告(默認運行出錯)
// emitWarning: !config.dev.showEslintErrorsInOverlay
}
},
]
}
|
4. 重新bulid代碼運行,完美生效!!!!!!
推薦三個VSCode插件
- ESLint (只支持高亮顯示js文件)
- EditorConfig
- Typings(代碼錯誤提示)
常見的報錯
文件末尾存在空行(eol-last)