配置eslint 统一代码风格方便团队开发
1.安装eslint包和依赖
npm i eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node -D
2.创建一个文件.eslintrc
{
"extends":"standard",
"plugins": [
"html"
]
}
3.需要识别vue内部的js
npm i eslint-plugin-html
4.package.json npm指令
//1.lint 指定文件后缀和哪个文件夹下的文件
//2.lint-fix 修复
"scripts": {
"lint": "eslint --ext .js --ext .jsx --ext .vue client/"
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue client/"
}
5.自动检查
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'
// 预处理
}
6.git提交前进行代码检验不通过无法提交
先初始代码仓库 git init 然后npm i husky -D
"scripts": {
"precommit": "npm run lint-fix"
}
7.编辑插件使用快速开发
安装 EditorConfig for VS Code
创建 .editorconfig 文件 加入
root = true
[*]
charset = utf-8
end_of_line = =lf
indent_size = 2
indent_style = space
# 最后一行自动加回车
insert_final_newline = true
# 最后一行有空格 自动清除
trim_trailing_whitespace = true
个人设置内加入下面的key
"eslint.autoFixOnSave": true, // 每次保存的时候将代码按eslint格式进行修复
"eslint.validate": [
"javascript",{
"language": "vue",
"autoFix": true
},"html",
"vue"
],
