前端CodeReivew实践

把Code Review变成一种开发文化而不仅仅是一种制度

把Code Review 作为开发流程的必选项后,不代表Code Review这件事就可以执行的很好,因为Code Review 的执行,很大部分程度上依赖于审查者的认真审查,以及被审查者的积极配合,两者缺一不可!

如果仅仅只是当作一个流程制度,那么就可能会流于形式。最终结果就是看起来有Code Review,但没有人认真审查,随便看下就通过了,或者发现问题也不愿意修改。

真要把Code Review这件事做好,必须让Code Review变成团队的一种文化,开发人员从心底接受这件事,并认真执行这件事。

要形成这样的文化,不那么容易,也没有想象的那么难,比如这些方面可以参考:

  • 首先,得让开发人员认识到Code Review这件事为自己、为团队带来的好处
  • 然后,得要有几个人做好表率作用,榜样的力量很重要
  • 还有,对于管理者来说,你激励什么,往往就会得到什么
  • 最后,像写自动化测试一样,把Code Review要作为开发任务的一部分,给审查者和被审查者都留出专门的时间去做这件事,不能光想着马儿跑得快又舍不得给马儿吃草

如何形成这样的文化,有心的话,还有很多方法可以尝试。只有真正让大家都认同和践行,才可能去做好Code Review这件事。

自动化工具及规则

前端代码规范

  1. eslint config
  2. coding里增加eslint的扫描

扫出来问题很多:后端也在改,每个迭代修改几类。这个需要大家看看是否参考后端的方式,定期梳理一批

提交MR前的必要条件

  • 先设计再编码

建议大家在做复杂功能设计之前可以内部先简单进行一轮头脑碰撞,看一下是否思路可行,或者大家可以一起看一下是否有更好的实现方案。否则review的时候大部分逻辑都写完了,如果有更好的方案,不一定能在review的时候再提出修改了,就算提出了,也可能会涉及大量代码的重写,最终耽误工期。

  • 本地代码通过eslint审查

在提交代码前,请确保error、warning都已处理完毕。有必要忽略eslint校验时可以考虑使用

/* eslint-disable */

/* eslint-disable no-param-reassign */

// eslint-disable-next-line,

否则肉眼的力量是有限的

  • PR要小

在做Code Review的时候,如果有大量的文件修改,那么Review起来是很困难的,但如果PR比较小,相对就比较容易Review,也容易发现代码中可能存在的问题。

有必要的话,可以拆分功能点,分阶段提交MR,提交的时候标注仅review还是review+merge

  • 开发要预留时间,你的Reviewer也要提前周知预留时间

如何review

对评论进行分级

在做Code Review时,需要针对审查出有问题的代码行添加评论,如果只是评论,有时候对于被审查者比较难甄别评论所代表的含义,是不是必须要修改。

建议可以对Review的评论进行分级,不同级别的结果可以打上不同的Tag,比如说:

  • [blocker]在评论前面加上一个blocker标记,表示这个代码行的问题必须要修改
  • [optional]:在评论前面加上一个[optional]标记,表示这个代码行的问题可改可不改
  • [question]:在评论前面加上一个[question]标记,表示对这个代码行不理解,有问题需要问,被审查者需要针对问题进行回复澄清

类似这样的分级可以帮助被审查者直观了解Review结果,提高Review效率。

文件结构的检查

  • 是否符合代码工程目前形成的常用文件结构
  • 文件命名规范
  • 文件放置的位置是否合理(比如demand的组件不能放到teamspace下)

书写风格

变量

驼峰式命名

let cardList;
let cardListButton;
function getcardList(){}

常量

全部大写,使用下划线来分割单词

const TIMEOUT = 10000;
const MAX_LENGHT = 10;

Function

对应的方法应该使用对应的动词,例如:

get/set,add/remove,create/destroy,start/stop,insert/delete,begin/end;

驼峰式命名;

构造函数的函数名,采用首字母大写(InitialCap);其他函数名,一律首字母小写。

css规范

命名规范:BEM+ Utility-first

No全局污染

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件举报,一经查实,本站将立刻删除。

本文链接:https://www.f2er.com/3188642.html

大家都在看

  • 飞码LowCode前端技术系列:如何便捷快速验证实现投产及飞码探索

    本篇文章从数据中心,事件中心如何协议工作、不依赖环境对vue2.x、vue3.x都可以支持、投产页面问题定位三个方面进行分析。
    2023-11-16 博文
  • 如何优雅使用 vuex

    大纲 本文内容更多的是讲讲使用 vuex 的一些心得想法,所以大概会讲述下面这些点: Q1:我为什么会想使用 vuex 来管理数据状态交互? Q2:使用 vuex 框架有哪些缺点或者说副作用? Q3:我是如何在项目里使用 vuex 的? 初识 vuex 对于 vuex,有人喜欢,有人反感 喜欢的人觉
    2023-11-16 博文
  • 第三方组件及计算属性传参的问题解决方式

    1. 前言 唉,好想玩滋嘣。 2. 计算属性直接传参接收不到 表格数据某一列需要用的计算属性时,模板中使用计算属性 fullName 就会直接调用 fullName 函数,而在模板中 fullName(item) 相当于fullName()(item),此处为函数柯里化。 <el-table-
    2023-11-16 博文
  • 记录--Vue3基于Grid布局简单实现一个瀑布流组件

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 在学习Grid布局之时,我发现其是CSS中的一种强大的布局方案,它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,在刷某书和某宝首页时,我们发现其展示方式就是一种瀑布流,是一种流行的网站页面布局,视觉表……
    2023-11-16 博文
  • 用强数据类型保护你的表单数据-基于antd表单的类型约束

    接口数据类型与表单提交数据类型,在大多数情况下,大部分属性的类型是相同的,但很少能做到完全统一。我在之前的工作中经常为了方便,直接将接口数据类型复用为表单内数据类型,在遇到属性类型不一致的情况时会使用any强制忽略类型错误。后来经过自省与思考,这种工作模式会引起各种隐藏bug,一定有更……
    2023-11-16 博文
  • pinia的使用

    前言 最近新开了个项目,以前老项目都是vue2+vuex开发的,都说用vue3+pinia爽得多,那新项目就vue3+pinia吧。这里记录一下pinia的使用。 使用方法 安装pinia: npm i pinia main.js中引入pinia: //main.js import { create
    2023-11-16 博文
  • 记录--让我们来深入了解一下前端“三清”是什么

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前端“三清” 在前端开发中,我们经常听到关于“三清”的说法,即 window、document、Object。这三者分别代表了 BOM(浏览器对象模型)、DOM(文档对象模型)以及 JS 的顶层对象。在这个体系中,我们通过 JavaScr
    2023-11-16 博文
  • 记录--啊?Vue是有三种路由模式的?

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 众所周知,vue路由模式常见的有 history 和 hash 模式,但其实还有一种方式-abstract模式(了解一哈~) 别急,本文我们将重点逐步了解: 路由 + 几种路由模式 + 使用场景 + 思考 + freestyle 路由概念
    2023-11-16 博文