配置eslint 統(tǒng)一代碼風(fēng)格方便團(tuán)隊(duì)開發(fā)
1.安裝eslint包和依賴
npm i eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node -D
2.創(chuàng)建一個(gè)文件.eslintrc
{
"extends":"standard",
"plugins": [
"html"
]
}
3.需要識(shí)別vue內(nèi)部的js
npm i eslint-plugin-html
4.package.json npm指令
//1.lint 指定文件后綴和哪個(gè)文件夾下的文件
//2.lint-fix 修復(fù)
"scripts": {
"lint": "eslint --ext .js --ext .jsx --ext .vue client/"
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue client/"
}
5.自動(dòng)檢查
npm i eslint-loader babel-eslint -D
5.1 .eslintrc 加入
"parser": "babel-eslint"
5.2 webpack.config.base.js 加入
{
test: /\.(vue|js|jsx)$/,
loader: 'eslint-loader',
exclude: /node_modules/,
enforce: 'pre'
// 預(yù)處理
}
6.git提交前進(jìn)行代碼檢驗(yàn)不通過(guò)無(wú)法提交
先初始代碼倉(cāng)庫(kù) git init 然后npm i husky -D
"scripts": {
"precommit": "npm run lint-fix"
}
7.編輯插件使用快速開發(fā)
安裝 EditorConfig for VS Code
創(chuàng)建 .editorconfig 文件 加入
root = true
[*]
charset = utf-8
end_of_line = =lf
indent_size = 2
indent_style = space
# 最后一行自動(dòng)加回車
insert_final_newline = true
# 最后一行有空格 自動(dòng)清除
trim_trailing_whitespace = true
個(gè)人設(shè)置內(nèi)加入下面的key
"eslint.autoFixOnSave": true, // 每次保存的時(shí)候?qū)⒋a按eslint格式進(jìn)行修復(fù)
"eslint.validate": [
"javascript",{
"language": "vue",
"autoFix": true
},"html",
"vue"
],
