首页 > 其他分享 >前端CodeReivew实践

前端CodeReivew实践

时间:2023-10-24 12:11:43浏览次数:33  
标签:代码 Code 审查 Review CodeReivew 实践 eslint review 前端

把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全局污染

标签:代码,Code,审查,Review,CodeReivew,实践,eslint,review,前端
From: https://www.cnblogs.com/jingdongkeji/p/17784521.html

相关文章

  • Redis深度历险 核心原理与应用实践-笔记
     1.2.25种基础数据结构string(字符串)字符串string是Redis最简单的数据结构,其内部表示就是一个字符数组。Redis所有的数据结构都是以唯一的key字符串作为名称,然后通过这唯一的key来获取相应的value数据。不同类型的数据结构差异就在于value的结果不一样。Redis的字符串是动......
  • 为什么一些前端不喜欢 Restful Api?
    做过不少系统架构,全栈、前后端一起设计,我认为至少在部分领域restful可以扔了。第一个被淘汰的是URI风格,主要是现在都是纯JSON请求和返回,例如post一般情况下id都和JSON放一起提交了,就没URI的必要。然后既然post都润了,那get、put、delete也一样了。且在js代码里面单独为URI设置......
  • 前端新手学习路线
    @[TOC]前端学习路线!这份学习路线并不完美,也不会有最终形态,正如前端不可预见、永无止境的未来。特点一份全面的前端知识点大梳理和汇总分阶段学习,每个阶段给出学习目标使用符号对知识点的重要程度做了区分,按需学习知识点附有描述和资源链接提供一份清晰的个人顺序学习路线方法提供大......
  • Filebeat收集系统日志实践
    3.1系统日志有哪些系统日志其实很宽泛、通常我们说的是messages、secure、cron、dmesg、ssh、boot等日志3.2系统日志收集思路系统中有很多日志,挨个配置收集就变得非常麻烦了。所以我们需要对这些日志进行统一、集中的管理。可以通过rsyslog将本地所有类型的日志都写入/var/l......
  • 飞码LowCode前端技术系列(一):数据结构设计
    简介飞码是京东科技研发的低代码产品,可使营销运营域下web页面快速搭建。飞码是单web页面搭建工具,从创建页面到监测再到投产的一站式解决方案。会通过七篇文章介绍飞码,分别是:(1)背景与数据结构设计,(2)如何便捷配置出页面-1,(3)如何便捷配置出页面-2,(4)如何便捷配置出页面-3,(5)如何便捷配置出......
  • 栩栩如生,音色克隆,Bert-vits2文字转语音打造鬼畜视频实践(Python3.10)
    诸公可知目前最牛逼的TTS免费开源项目是哪一个?没错,是Bert-vits2,没有之一。它是在本来已经极其强大的Vits项目中融入了Bert大模型,基本上解决了VITS的语气韵律问题,在效果非常出色的情况下训练的成本开销普通人也完全可以接受。BERT的核心思想是通过在大规模文本语料上进行无监督预......
  • 前端技术方案内容概述
    项目介绍技术栈信息技术方案总的架构图重难点技术方案架构图、流程图、类图等通用沉淀脚手架、组件库、工具函数等组件与数据通用组件、业务组件接口文档、数据流状态图mock方案适配国际化多端适配主题等工时评估页面功能接口......
  • 前端反卷计划-组件库-01-环境搭建
    Hi,大家好!我是程序员库里。今天开始分享如何从0搭建UI组件库。这也是前端反卷计划中的一项。在接下来的日子,我会持续分享前端反卷计划中的每个知识点。以下是前端反卷计划的内容:目前这些内容持续更新到了我的学习文档中。感兴趣的欢迎一起学习!环境搭建组件库名字因为......
  • 前端token获取存储
    //存储的token的KEYexportconstTOKEN_KEY='token-user';//获取token接口urlexportconstTOKEN_URL='';//跳转登录地址exportconstLOGIN_URL='';//获取tokenexportfunctiongetToken(){consttoken=localStorage.getItem(TOKEN_......
  • 值得收藏的前端开发必备工具类函数
     /***空值:[undefined,null,NaN,[],{}],注意非空:0,false;*@param{*}value*@returnsBoolean*/functionisEmpty(value){switch(Object.prototype.toString.call(value)){case'[objectUndefined]':returnvalue===void......