? npm i?
? eslint eslint-config-standard?
? eslint-plugin-standard?
? eslint-plugin-promise?
? eslint-plugin-import?
? eslint-plugin-node?
? eslint-plugin-html -D

eslint-plugin-html插件識別html文件中的script標(biāo)簽里面的JavaScript

文件配置說明

在項目目錄新建.eslintrc文件:

{
? "extends": "standard",
? "plugins": [
? ? "html"
? ],
? "rules": {
? ? "no-new": "off"
? }
}

啟動命令配置

在package.json的scripts中加入：

"lint": "eslint --ext .js --ext .jsx --ext .vue client/",
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue client/"

client/ 為要檢查的文件夾

執(zhí)行：

npm run lint ? ? ? ? ?//語法檢查
npm run lint-fix ? ? ?//自動修復(fù)語法檢查出現(xiàn)的問題

自動檢查語法配置

命令行執(zhí)行：

npm i eslint-loader babel-eslint -D

然后在.eslintrc文件中添加"parser": "babel-eslint"：

{
?"extends": "standard",
? "plugins": [
? ? "html"
? ],
? "parser": "babel-eslint",
? "rules": {
? ? "no-new": "off"
? }
}

在webpack的配置文件的module.rules中加入：

{
? ?test: /\.(vue|js|jsx)$/,
? ?loader: 'eslint-loader',
? ?exclude: /node_modules/,
? ?enforce: 'pre' ? //預(yù)處理
},

添加editorconfig

在項目目錄新建.editorconfig文件：

root = true
? ??
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

vue editorconfig編輯器配置說明

editorconfig是什么，有什么用

editorconfig是定義編碼樣式的配置文件，幫助多人合作項目或者不同編輯器下保持代碼風(fēng)格統(tǒng)一。

editorconfig示例

# http://editorconfig.org ?(Editorconfig 的官方網(wǎng)站)
# 控制 EditorConfig 約定的范圍?
root = true?

# 匹配全部文件
[*]

# 設(shè)置字符集
charset = utf-8

# 縮進風(fēng)格 可選"space"、"tab"
indent_style = space

# 縮進大小 可以是數(shù)字（空格數(shù)）， tab(如果tab大小沒設(shè)置則按編輯器默認(rèn)tab大小)
indent_size = 2

# tab的寬度
tab_width = 4

# 結(jié)尾換行符，可選"lf"、"cr"、"crlf"
end_of_line = lf

# 文件最后插入一個空行
insert_final_newline = true

# 刪除行尾空格
trim_trailing_whitespace = true

# 匹配.java結(jié)尾的文件
[*.java]

# 匹配.md結(jié)尾的文件
[*.md]
trim_trailing_whitespace = false

root=true 控制 EditorConfig 約定的范圍 , Visual Studio 會在打開的文件的目錄和每個父目錄中查找名為 .editorconfig 的文件。到達根文件路徑時或找到具有 root=true 的 .editorconfig 文件時搜索結(jié)束。