如何提升团队代码质量

时间 2019-11-17

标签如何提升团队代码质量繁體版

原文原文链接

前言

为何开发都喜欢重构代码，而不是在原有的代码上作持续迭代呢？我想，糟糕的代码质量，是你拒绝在源代码上继续修改的重要理由，甚至没有之一。所以，统一团队代码风格，提升团队代码质量，是颇有必要的一件事。下面是我在团队代码质量管理上的一些经验分享。javascript

约定代码风格

一个团队必定要有统一的代码风格，而且一以贯之，使开发人员在跨模块甚至跨应用开发时，能够无痛切换。这里推荐腾讯团队的代码规范，从命名到HTML、CSS、Javascript的书写规范，包罗万象，并辅以代码说明，浅显易懂。也能够根据自身团队的状况作一些调整，不必定全盘复用。不足之处就是两年多没有任何更新了，一些ES6\7\8的规范有所欠缺。前端

另外，若是你的项目是基于vuejs开发的，你可能还要遵循一个vue的开发规范，使用官网的风格指南便可。vue

启用ESLint

约定了代码风格，如何保证执行呢？靠肉眼一行一行去看确定是不行的，那么大名鼎鼎的ESLint你确定是听过的。ESLint是须要配置的，具体怎么配置能够去官网本身查，这里推荐使用standard风格，固然你能够选择airbnb或者彻底手动配置，根据自身团队状况来就好。java

当第一次接触ESLint时，大部分人都是痛苦的，写一段代码满屏飘红，不少人适应不了就把它关了。其实只要你适应它几天，就能写出彻底符合ESLint要求的代码了，并且还能够配置vscode的ESLint插件，配置保存时自动格式化，哪怕写错也能帮你自动改正，减小适应的痛苦。react

它的优势就是统一团队代码风格，矫正代码书写规范，配合编辑器的保存自动格式化，效果更佳。git

除了ESLint，还有CSSLint、HTMLHint，顾名思义，分别是统一CSS和HTML风格的，也能够一块儿用起来。github

使用githook校验提交的代码

即使是启用了ESLint，仍是有人将不符合规范的代码push到了仓库中，这种问题又要怎样去规避呢？框架

利用git的hook函数，在commit以前去执行eslint或其余命令，校验提交的代码是否符合规范。若是不符合规范，就会输出报错信息，阻止这一次的提交。编辑器

通常前端项目可使用husky插件配置githook，而后使用lint-staged限制只对暂存区的代码作扫描，否则会对整个git仓库作扫描，一来耗时，二来可能会扫出大量问题，必须所有修复才能提交。ide

使用QA工具扫描项目

以上主要是对代码风格的规范和约束，若是想对代码作进步一的质量优化，还要借助更高级的QA工具，好比公司的java开发常用的findBugs，sonar qube 等。

其中sonar很强大，支持25中开发语言，其中也包括JavaScript、HTML和CSS。但若是要配置在vscode中使用时，须要依赖本地的java环境，配置起来可能会有些麻烦。不过其官网的文档很详细，彻底能够当作代码指南来参考。

除了sonar，还有个工具DeepScan，除了能扫描js，还支持vue和react语法，能帮助你发现不符合js框架规范的bug。最棒的是，他有可视化的仪表盘，能够直观的分析代码质量，而且支持团队管理。不过它只能同步github上的项目，目前用下来，还会有偶尔同步失败的问题。我是将gitlab上的项目拷贝一份到github，再用DeepScan同步过来扫描。它有免费版本和收费版本，收费版本能够同步github上的private项目，不过我在试用状态下，是不能正常同步private项目的，不知道是bug仍是设定如此。

结对 code review

咱们都但愿工具能帮咱们解决全部问题，但现实每每没有那么美好。纵然上面的工具已经作得很棒了，但它也仅仅是帮咱们统一了代码风格，避免了一些琐碎且基础的错误。好的代码必定是没有错误的代码，但没有错误的代码不必定是好代码，上述工具作好了前一半，后一半仍是须要人来参与。

结对 code review的优势：

每一个人的技能树都不尽相同，各自擅长的东西也不同，多一我的来review，天然会有更大的概率发现问题；
不只能相互发现问题，也能相互学习对方好的设计思想和代码习惯，取其精华，去其糟粕。建议每次结对都换一我的，这样收益更多；
相对于工具，人能够从更宏观的角度想问题，能够结合需求、使用场景、边界值等因素来分析代码，而不是只看一个点写的好很差。

结语

全部能落实的方案，才有意义，不然即是空谈。在代码质量的提升上，不建议一蹴而就，否则会有很大的推行阻力。所以，咱们能够按部就班，让团队慢慢去适应。好比能够先约定代码风格，在开发新项目或重构项目时，再启用ESLint，等团队适应了，再执行QA工具扫描、结对 code review等。