在淘宝,我们是这样衡量代码质量的

简介: ![img](https://img.alicdn.com/tfs/TB1ZTW4VEY1gK0jSZFMXXaWcVXa-2304-1194.png) **越高级别的程序员往往越看重代码质量。** 本篇文章主要聊一下在团队开发过程中,如何做到代码质量的管控与提升。首先需要有一套规范,定义什么是好的代码,再通过一些工具,帮助我们在实践规范的过程中,更好地遵循规范。 > TLDR:

img

越高级别的程序员往往越看重代码质量。

本篇文章主要聊一下在团队开发过程中,如何做到代码质量的管控与提升。首先需要有一套规范,定义什么是好的代码,再通过一些工具,帮助我们在实践规范的过程中,更好地遵循规范。

TLDR: 直接看第 4 点, Iceworks Doctor 解决方案。

demo

为何需要提高代码质量?

好的代码一定是整洁的,并且能够帮助阅读的人快速理解和定位。好的代码可以加快应用的开发迭代速度,不必花过多的时间来修复 bug 和完善代码。好的代码不但能够使得新的项目成员更容易加入项目,同时方便项目组成员快速做好 Back up。好的代码便于促进团队间交流合作提升开发效率。

有编码经验的人对代码都有一定的“鉴赏力”,能够凭感觉给出代码好坏的主观评价。但是这种凭感觉的方式太过个性随意,所谓仁者见仁智者见智,很难达成共识,那有没有一种公认的标准来鉴定代码质量呢?

代码质量评价标准

答案是有的。这里简单分享当下较常用的评价标准,其中包括:编码规范、可读性、可维护性、重复度及可测试性。

编码规范
主要包含是否遵守了最佳实践和团队编码规范,是否包含可能出问题的代码,以及可能存在安全的漏洞。编码规范有助于提高团队内协助的效率以及代码的可维护性。

可读性
Code Review 是一个很好的测验代码可读性的手段。如果你的同事可以轻松地读懂你写的代码,那说明你的代码可读性很好;反之则说明你的代码可读性有待提高了。遵守编码规范也能让我们写出可读性更好的代码。

可维护性
代码的可维护性是由很多因素协同作用的结果。代码的可读性好、简洁、可扩展性好,就会使得代码易维护;更细化地讲,如果代码分层清晰、模块化好、高内聚低耦合、遵从基于接口而非实现编程的设计原则等等,那就可能意味着代码易维护。除此之外,代码的易维护性还跟项目代码量的多少、业务的复杂程度、利用到的技术的复杂程度、文档是否全面等诸多因素有关。

重复度
遵守 Don’t Repeat Yourself 原则,尽量减少重复代码的编写,复用已有的代码。对项目定期进行代码重复度检测是一个很有意义的事,可以帮助开发人员发现冗余代码,进行代码抽象和重构。重复的代码一旦出错,意味着加倍的工作量和持续的不可控。如果代码中有大量的重复代码,就要考虑将重复的代码提取出来,封装成公共的方法或者组件。

可测试性
代码可测试性的好坏,同样可以反应代码质量的好坏。代码的可测试性差,比较难写单元测试,那基本上就能说明代码设计得有问题。

除此之外还有很多代码质量评价标准。我们需要一些取舍,选取部分大家有共识的规则定义团队好的代码标准。

代码质量建设怎么开始

当团队有了统一的代码质量评价标准后,便需要严格的执行代码编写规范。

工欲善其事,必先利其器

我们可以通过 SonarQube 等静态代码检测工具来进行代码质量建设。但在代码完成发布后如果线上没有问题的话,相信很少有人会主动优化代码,即使有扫描结果也很难推动代码质量的提升。

所以这里很需要平台、工具或者工作流上的配合。否则在具体写代码的过程中,很容易由于开发人员的不重视,导致整个 Code Base 变得越来越差。所以提高团队对代码规范的认同及严格执行是代码质量建设的关键。

当然我们也可以在代码提交的时候,利用钩子来控制允许提交或者拒绝提交,比如 git 的 pre-commit 和 commit-msg。但是这些都是比较滞后的方式,我们能不能更提前发现问题让开发在功能开发过程中就把发现的问题改掉?

Iceworks Doctor

为实现 JavaScript 代码规范的统一,并提升和改善团队代码质量,我们当前发布了 Iceworks Doctor 0.1.0 版本。该方案目前包括多场景统一的 ESLint 规则配置、多维度的代码衡量标准、执行分析扫描代码及代码修复等模块。通过各个模块协调配合,评估质量评分并修复规范问题,在降低维护成本、提升执行效率的同时保障代码规范的统一。

质量评分

img

当前版本通过 @iceworks/doctor 从 5 个维度对代码进行评分:

  1. 最佳实践: 通过 @iceworks/eslint-plugin-best-practices 分析项目,提出符合当前工程特征(对 iceRax 项目友好)的最佳实践及阻塞问题发布卡口,帮助开发者优化项目性能,避免潜在 bug 。
  2. 安全实践: 通过 @iceworks/eslint-plugin-security-practices 扫码代码检测工程中可能存在的安全风险,包含 url 、敏感成词、明文账密信息及 npm 包证书检测,降低项目安全风险,守卫项目安全。
  3. 阿里代码规范: 这一维度主要反馈开发人员对于 eslint-config-ali 阿里开发规约的遵守程度。
  4. 可维护度: 通过 typhonjs-escomplex 对文件进行扫码,得出每个文件的可维护度,可读性及复杂度评分。针对得分较差的文件可以进行深度分析帮助开发者更好的重构复杂代码。
  5. 重复度: 通过 jscpd 计算重复出现的代码区块占比,计算出 clone 分数。并逐一列举重复的代码,方便开发者快速定位重复代码,将其封装成公共的方法或者组件。

根据上述 5 个维度通过加权平均的方式计算项目质量分,并根据木桶效应,在计算得分的过程中加大了最低分的权重,得出最终项目质量评分。

快来使用 Iceworks Doctor 测测自己项目的得分,比比谁的分数高吧~

问题修复

利用 VS Code 代码提示能力,我们在源码中标记出了问题代码,辅助开发者快速定位及修复代码。有问题的代码会在代码及文件名上有红色 / 黄色波浪线标示,鼠标 hover 时可预览问题详情窗口,也可通过 VS Code Problems 栏查看 Errors 列表。方便开发者在更前置的开发过程中发现和修复问题。

点击 “一键修复” 按钮可快速修正问题代码。同时在保存代码时,实时检测是否存在有安全风险的代码。

img

您的数据是私有的: Iceworks Doctor 是开源的,你可以很容易地看到我们收集了什么数据。我们永远不会与任何人共享您的个人数据。

前进方向思考

愿景: 让团队没有不及格(低于60分)的代码。

整体方案的设计如下图所示:

img

在后续的版本迭代中,Iceworks Doctor 将构建一个完整的系统性方案。仅需安装一个 VS Code 插件,便可拥有从配置开发环境,辅助开发、诊断和修复质量问题到 PR 发布一整套更加便捷智能的工作流程。通过极低的成本便可维护团队代码质量,开发环境、质量、安全问题及团队协作问题均可在 VS Code 中解决,并在关键的流程节点来把控代码的质量,深度和 DEF 团队合作形成闭环。

同时我们正在筹划淘系前端最佳实践的 ESLint 规范,结合 eslint-config-ali 及和各个团队的质量接口人共同制定出更适合淘系前端团队的 ESLint 规范。(欢迎私信我 进行共建哦~)

我们还将为有需要的团队提供研发数据服务支持,管理查询项目质量的同时,可以配置定制更符合团队需要的质量解决方案及发布卡口,发布公告等。

联系我们

我们正在推动 Iceworks 在更多团队中落地。在使用过程中,有任何问题或建议也希望大家多提意见反馈,我们将第一时间进行处理。

钉钉群:「飞冰(ICE)社区群」(阿里同学请搜索「飞冰(ICE)万能群」)

最后,我们会通过 Iceworks 持续将更多淘宝前端团队沉淀的解决方案共享给大家。

目录
相关文章
|
9月前
|
供应链 数据可视化 Java
提高开发质量的 5 个必要实践
提高开发质量的 5 个必要实践
|
测试技术 UED
复盘归因,提高交付质量的秘诀
这个阶段包括原型图、PRD文档、交互设计、技术方案、测试用例等几项重要产出物,当然他们有一定的前后依赖关系。
复盘归因,提高交付质量的秘诀
|
监控 测试技术 程序员
|
监控 搜索推荐 数据管理
测试人如何做好质量建设
答案都在这里了
170 0
|
移动开发 JavaScript 前端开发
报错/卡顿是衡量产品体验的基本要素
报错/卡顿是衡量产品体验的基本要素
79 0
报错/卡顿是衡量产品体验的基本要素
|
数据采集 监控 供应链
谈谈生产过程数据的质量评估
在制造过程中,数据质量和产品质量一样重要。我们可以将ISO 8000中的数据质量评估应用到IEC62264中的制造过程中。
谈谈生产过程数据的质量评估
|
测试技术 数据库
相亲软件开发,衡量软件开发质量的软件测试
相亲软件开发,衡量软件开发质量的软件测试
|
设计模式 安全 程序员
从哪些维度评判代码质量的好坏?如何具备写出高质量代码的能力?
从哪些维度评判代码质量的好坏?如何具备写出高质量代码的能力?
265 1
|
监控 Java 程序员
用代码“读懂”代码:衡量开发交付质量(微服务度量之一)
用代码“读懂”代码:衡量开发交付质量(微服务度量之一)
329 0
用代码“读懂”代码:衡量开发交付质量(微服务度量之一)
|
编解码 缓存 网络协议
评估陪玩平台源码好坏,主要看哪几个方面?
评估陪玩平台源码好坏,主要看哪几个方面?