多人的项目开发,代码格式不一致会引起冲突,使用eslint 统一代码规范,保存的时候自动统一代码格式,减少因为代码格式引起的冲突。
一、准备
1.1 安装如下依赖
@vue/cli-plugin-eslint
eslint
eslint-plugin-prettier
@vue/eslint-config-prettier
eslint-plugin-vue
1.2 安装vscode 插件
eslint:
Prettier - Code formatter:
Beautify:
二、设置 Eslint 的规则
在项目根目录下新建 .eslintrc.js 文件,用于编写 eslint 的相关规则,来校验代码。关于 eslint 的具体规则,可以查看官方文档。
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/essential', 'eslint:recommended','@vue/prettier'],
rules: {
'no-console': 0,
'no-debugger': 0
},
parserOptions: {
parser: 'babel-eslint'
}
}
三、手动设置vsCode 的settings.json 文件内容:
打开vscode => 首选项 => 设置 => 扩展 => ESLint => 在 settings.json 中编辑,
在 settings.json 文件中添加如下代码:
{
"todo-tree.tree.showScanModeButton": false,
"[json]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"eslint.migration.2_x": "off",
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[javascript]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
//设置eslint保存时自动格式化
"editor.codeActionsOnSave": {
"source.fixAll.eslint":true
}
}
如果设置完没有生效,重新启动vsCode,会弹出一个允许授权的弹框,点击允许就可以了。