为了项目代码长期维护，代码规范是技术团队建设必须重视的一件事情。规范的制定很容易，可是执行却一直不那么彻底。尤其是赶项目进度的时候。写代码的是人，不是机器。
列举下为了代码规范的有效实行，我们团队使用过的方法：
1、团队成员相互手动 code review，每周开code review 会总结，仅仅坚持了两个月；
2、vistual studio编辑器上安装svn code review插件，在代码提交的时候进行code review， 可以评价每一行代码，发给对应的人，并有任务要求每人每周必须review多少行代码。这个方法运行了很长时间，代码规范得执行得到了较大改善。但在换了git版本管理工具后废弃。
我们团队所有项目都是使用的vue，新项目使用的vue-cli脚手架搭建。 经过过多次改进后，团队现行的代码规范执行办法：
1、统一使用编辑器 visual studio code。
2、安装扩展ESLint、Vetur、Prettier - Code formatter。
采用vue框架开发 所以需要安装 Vetur 高亮和格式化vue文件
3、在项目的.eslintrc.js文件中配置统一的代码检测规范。 很多大厂都公开有这个配置文件，可以参考。 我们也是拿了一份比较严格的过来，在使用的过程中不断修改，根据项目的实际情况放宽了部分规范。
4、在编辑器首选项设置 autoFixOnSave 为true，可以在写代码过程中检测不规范的地方，标红并有问题说明。看不明白的可以去eslint官网查相关说明。https://eslint.org/docs/rules/ 。 英文不好的，可以去看腾讯云翻译的机器版本 https://cloud.tencent.com/developer/chapter/12618
经过以上设置，可以解决大部分因为换行，空格之类的不规范问题。
5、项目package.json 中写入lint配置 "lint": "vue-cli-service lint --fix --ext .js,.vue src", 这样就可以使用npm run lint 来检测代码规范，同时自动修复部分不规范的地方。
6、交叉开发
经过以上操作，对有代码洁癖范的我来说，团队代码看起来至少算是整齐了。但只是解决了代码格式问题，更多的问题还是需要人工review。我们采用了交叉开发的方式，每个人不再是总维护一个或几个项目，而是可能随时被征调去开发任何项目。这样做的前提是我们前端的代码逻辑不复杂，注释清晰，上手新项目的成本低。好处是顺便revie前人的代码，相互学习，减轻代码疲劳。人员离职交接很容易。
最后附上vscode编辑器的settings.json配置：
{
"editor.wordWrap": "on",
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript"
},
"emmet.includeLanguages": {
"wxml": "html"
},
"git.autofetch": true,
"files.autoSave": "off",
"eslint.validate": [
"javascript",
"javascriptreact",
"vue-html",
{ "language": "vue", "autoFix": true }
],
"eslint.autoFixOnSave": true,
"prettier.tabWidth": 4,
"minapp-vscode.disableAutoConfig": true,
"vetur.format.options.tabSize": 4,
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto"
}
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"vetur.format.defaultFormatter.html": "js-beautify-html"
}
网友评论