在vscode上开发个人项目的时候，代码风格随你定，弄出花也没人说，可是一旦是团队项目，那就得注意代码风格了。举个常见例子来说，A修改了代码，并格式化成2个缩进，B也同时同一份代码，但格式化成4个缩进，这时候代码提交的时候就会存在冲突，需要花费大量的时间在格式上。
那么解决方案有三步
- 使用
Settings Sync拓展同步用户设置 - 使用
eslint统一代码风格 - 使用
git预检查工具在提交前检验
使用Settings Sync拓展
在之间的文章说过
不可否者vscode是一款好用的IDE，可是仍存在着一些小缺陷，为了方便在不同设备上使用统一的用户配置（团队协作时特别有用，确保代码风格统一），这里推荐一款vscode 插件 Settings Sync。
在项目开始的时候，我们要求团队成功的用户配置是一样的，这样可以确保代码风格一致。相关教程请移步 使用Settings Sync同步你的vscode配置。
使用Eslint
使用脚手架创建vue项目的时候会提示是否使用eslint，如果选用了而代码风格不符合规范，将在控制台中输出警告，此时代码仍然可以运行。
如果不是没有选用eslint或者不是vue项目，我们可以在ide中按照eslint拓展来帮助我们定位错误代码。
其他非vscode用户也可以安装相关的ide拓展
安装完成后将直接在代码上显示提示信息。
eslint有两个重要的配置文件，需要在项目根目录创建
1 .eslintignore
2 .eslintrc.js
.eslintignore eslint需要过滤检查的资源
.eslintrc.js eslint 检查规则
下面是简单的配置
# .eslintignore
node_modules/ # 忽略node_modules文件夹
/dist/ # 忽略检查dist文件夹
// .eslintrc.js
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}
其中我们需要注意的是.eslintrc.js文件下的rules配置，比如希望关闭eslint的console检测，我们再rules中添加一条规则
'no-console': 0
具体规则可以看官网或提示，配置属性为0或off可以关闭指定检查。
当然，处理代码检查，eslint还支持代码修复，简单的代码风格eslint可以直接修复，比如我们希望eslint修复src文件夹下的js文件，那么在package.json中添加一条自定义命令
# 安装eslint模块
$ npm install eslint --save-dev
# 添加eslint修复命令
"lint-fix": "eslint --fix --ext .js src/"
执行 npm run lint-fix 将自动修复。无法修复的将在控制台给出提示。
使用git预检查工具
原则上每次git commit前我们都需要先执行一下 lint-fix命令的，避免遗忘或者偷懒，我们使用预检查工具进行处理。
husky 是一个npm模块，可以在git提交前做拦截，如果拦截返回异常信息，将取消提交。
安装husky
$ npm install husky --save-dev
添加拦截事件precommit
# package.json
"precommit": "npm run lint-fix"
在提交前自动执行eslint修复命令，如果成功全部修复就可以正常提交，如果没有全部修复，将取消提交，避免无法团队代码。
愉快的提交代码
这样就确保了开发者本地的代码格式化是统一的，而且提交到线上的代码也是严格要求的。