高质量前端：Code Review 很慢，你要忍一下。

迷南。 2022-09-04 09:59 143阅读 0赞

> 张宇航：微医前端技术部医保支撑组，一个不文艺的处女座程序员。

## 前言 ##

没有无缘无故的爱，也没有无缘无故的恨，当然也没有无缘无故的 code review

## 为什么要 CR ##

给大家讲个故事，“大神 A”上班时突然恼羞成怒的骂道，**这是谁写的代码，没有注释啥也没有，这么明显的 bug。当时整个小组都不敢说话，慌的要死，生怕说的就是自己。领导发话：“大神 A”查下提交记录，谁提交的谁请吃饭。过了两分钟，“大神 A”：这，这**是我自己一年前提交的。所以不想自己尴尬，赶紧 code review 吧

## 一、角色职能 ##

![8242f103fbffa929eb4c3dfad255689d.png][]**author 即需求开发者。要求：**

*  注重注释。对复杂业务写明相应注释，commit 写明具体提交背景，便于 reviewer 理解。
 *  端正心态接受他人 review。对 reviewer 给出的 comment，不要有抵触的情绪，对你觉得不合理的建议，可以委婉地进行拒绝，或者详细说明自己的看法以及原因。reviewer 持有的观点并不一定是合理的，所以 review 也是一个相互学习的过程。
 *  完成 comment 修改后及时反馈。commit 提交信息备注如"reivew: xxxx"，保证复检效率。

**reviewer 作为 cr 参与者，建议由项目责任人和项目参与者组成。要求：**

*  说明 comment 等级。reviewer 对相应代码段提出评价时，需要指明对应等级，如
 *   *  fix: xxxxxxx  此处需强制修改，提供修改建议
     *  advise: xxxxxxx 此处主观上建议修改，不强制，可提供修改建议
     *  question: xxxxxx 此处存在疑虑，需要 author 作出解释
 *  友好 comment。评价注意措辞，可以说“我们可以如何去调整修改，可能会更合适。。。”，对于比较好的代码，也应该给与足够的赞美。
 *  享受 review。避免以挑毛病的心态 review，好的 reviewer 并不是以提的问题多来衡量的。跳出自己的编码风格，主动理解 author 的思路，也是一个很好的学习过程。

## 二、CR 流程 ##

#### 1、self-review ####

*  commit 之前要求 diff 一下，查看文件变更情况，可接着 gitk 完成。当然如果项目使用 pre-commit 关联 lint 校验，也能发现例如 debugger、console.log 之类语句。但是仍然提倡大家每次提交之前检查一下提交文件。
 *  多人协作下的 commit。多人合作下的分支在合并请求时，需要关注是否带入没必要的 commit。
 *  commit message。建议接入 husky、commitlint/cli 以及 commitlint/config-conventional 校验 commit message。commitlint/config-conventional 所提供的类型如
 *   *  feat: 新特性
     *  fix: 修改 bug
     *  chore: 优化，如项目结构，依赖安装更新等
     *  docs: 文档变更
     *  style: 样式相关修改
     *  refactor：项目重构

此目的为了进一步增加 commit message 信息量，帮助 reviewer 以及自己更有效的了解 commit 内容。

#### 2、CR ####

*  提测时发起 cr，需求任务关联 reviewer。提供合并请求，借助 gitlab/sourcetree/vscode gitlens 等工具。reviewer 结束后给与反馈
 *  针对 reviewer 提出的建议修改之后，commit message 注明类似'review fix'相关信息，便于 reviewer 复检。
 *  紧急需求，特事特办，跳过 cr 环节，事后 review。

## 三、CR 标准 ##

*  不纠结编码风格。编码风格交给 eslint/tslint/stylelint
 *  代码性能。大数据处理、重复渲染等
 *  代码注释。字段注释、文档注释等
 *  代码可读性。过多嵌套、低效冗余代码、功能独立、可读性变量方法命名等
 *  代码可扩展性。功能方法设计是否合理、模块拆分等
 *  控制 review 时间成本。reviewer 尽量由项目责任人组成，关注代码逻辑，无需逐字逐句理解。

## 四、最后 ##

总的来说，cr 并不是一个找 bug 挑毛病的过程，更不会降低整体开发效率。其目的是为了保证项目的规范性，使得其他开发人员在项目扩展和维护时节省更多的时间和精力。当然 cr 环节需要团队每一个成员去推动，只有每一个人都认可且参与进来，才能发挥 cr 的最大价值。![50744df2758570dbc9c612ebd5c9653c.gif][]最后安利一波本人开发 vscode 小插件搭配 gitlab 分支 review，主要流程是点击按钮发起合并请求，自动生成 mr 链接，并发送至企业微信通知相关责任人开始 review。

往期推荐

[![ea513e7d3fafe2893c5912cc5e07a9b8.png][]][ea513e7d3fafe2893c5912cc5e07a9b8.png 1]

[Vite 太快了，烦死了，是时候该小睡一会了。][ea513e7d3fafe2893c5912cc5e07a9b8.png 1]

[![9f351999ab95f6e1bd3c73babdb29141.png][]][9f351999ab95f6e1bd3c73babdb29141.png 1]

[如何实现比 setTimeout 快 80 倍的定时器？][9f351999ab95f6e1bd3c73babdb29141.png 1]

[![c64260a6f7794aa4bb34cdb31f19cec3.png][]][c64260a6f7794aa4bb34cdb31f19cec3.png 1]

[万字长文！总结Vue 性能优化方式及原理][c64260a6f7794aa4bb34cdb31f19cec3.png 1]

[![34e56b30ea7e6d575ae50b675f89544e.png][]][34e56b30ea7e6d575ae50b675f89544e.png 1]

[90 行代码的 webpack，你确定不学吗？][34e56b30ea7e6d575ae50b675f89544e.png 1]

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

1.  点个「**在看**」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -\_-）
2.  欢迎加我微信「huab119」拉你进技术群，长期交流学习...
    
    关注公众号「**前端劝退师**」，持续为你推送精选好文，也可以加我为好友，随时聊骚。
3.

![b1a44bc7518bd232e174356369978894.png][]

点个在看支持我吧，转发就更好了

[8242f103fbffa929eb4c3dfad255689d.png]: /images/20220829/a9e39e96ec6a4e0f904ebedc54b41ed7.png
[50744df2758570dbc9c612ebd5c9653c.gif]: /images/20220829/741788d35f304530a33ca81164de3a29.png
[ea513e7d3fafe2893c5912cc5e07a9b8.png]: /images/20220829/0d9ac91b6fd24faa8aa4c1290c45ba42.png
[ea513e7d3fafe2893c5912cc5e07a9b8.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg%3D%3D&chksm=e9c24fb1deb5c6a70410889666afec7da71e77e5ab4b17b7677a22a554fdc9ee2f3d97006322&idx=1&mid=2247487534&scene=21&sn=947df5483ab7508f8d2f9abd8c2f11a8#wechat_redirect
[9f351999ab95f6e1bd3c73babdb29141.png]: /images/20220829/966d9dbd6c9f4f31a6ade5927a3b2061.png
[9f351999ab95f6e1bd3c73babdb29141.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg%3D%3D&chksm=e9c25151deb5d847686e17e267e9659124dd4250f9df681564ce87a55190625bfd49adc02661&idx=1&mid=2247487182&scene=21&sn=ae83a65d4e6a9ee8b3b98a4cbe20c96b#wechat_redirect
[c64260a6f7794aa4bb34cdb31f19cec3.png]: /images/20220829/7ee9dcca7ac04efe88b9dac8bad0f987.png
[c64260a6f7794aa4bb34cdb31f19cec3.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg%3D%3D&chksm=e9c251e2deb5d8f455c581ddaf84a503c912d4bc2def725105fdf7442af6df6c6af0dee01b7b&idx=1&mid=2247487101&scene=21&sn=92c60dd47cf94731829bf006cd2b5e36#wechat_redirect
[34e56b30ea7e6d575ae50b675f89544e.png]: /images/20220829/116a3ba30853418e97d50d80e16e01e8.png
[34e56b30ea7e6d575ae50b675f89544e.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg%3D%3D&chksm=e9c24f0adeb5c61c4c64564fa3ef07fae165e0ba9c115c5846db1a94cd97f5f101e764c9b604&idx=1&mid=2247487637&scene=21&sn=bb353093eee2f07cfcfc7e4ad460ce7f#wechat_redirect
[b1a44bc7518bd232e174356369978894.png]: /images/20220829/b8b36a11960745e89b9402fad0a9d51a.png