在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拓展来帮助我们定位错误代码。
搜索并按照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修复命令,如果成功全部修复就可以正常提交,如果没有全部修复,将取消提交,避免无法团队代码。
愉快的提交代码
这样就确保了开发者本地的代码格式化是统一的,而且提交到线上的代码也是严格要求的。