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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/116684.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

求解仿射变换矩阵

仿射变换是图形学中经常用到的方法,通常但是仿射变换的系数是未知的,需要找到变换前后的三对对应点进行求解。 from affine import Affine import numpy as np参考文献 矩阵最小二乘法求解仿射变换矩阵 def solve_affine(init_points, goal_points) -&…

位置式PID

// 单环PID参数 float Position_KP 0.0180, Position_KI 0.0013, Position_KD 0.11425; /* 位置式PID系数 */ /*************************************************************************** brief 位置式PID控制器* param 实际位置reality,目标位置target…

【CCF】Z字形扫描

这题的关键是将整个扫描的过程,拆分成很多次斜着操作数组的过程。 而且这个过程中可以建立如下规律: (1)一斜线上的元素个数与切换到下一条斜线这一操作之间建立规律。 先讨论左上部分的数组: 1)当元素个…

小记java正则表达式中matcher.find() 和 matcher.matches() 的区别

matcher.find() 顾名思义,find为查找,其功能为查找字符串中是否有符合条件的字串(包含本身),当查找到时即返回true,更多地与matcher.group(int i) 配合使用,用于从字符串中取出特定字串。 mat…

linux 装机教程(自用备忘)

文章目录 安装 pyenv 管理多版本 python 环境安装使用使用 pyenv 和 virtualenv 管理虚拟 python 环境 sshvscode 连接远程服务器tmux 美化zsh 安装 pyenv 管理多版本 python 环境 安装 (教程参考:https://www.modb.pro/db/155036) sudo a…

2023 uniapp( vue3 + TS )使用canvas生成海报并保存,taro/微信小程序也适用

有段时间没写vue了&#xff0c;有点生疏了...... 1、代码有注释&#xff0c;完整代码如下 <template><view class"page"><canvas class"canvas" v-if"isShow" :style"{width:${canvasWidth}px,height:${canvasHeight}px}&…

React之引入css的方式

一、是什么 组件式开发选择合适的css解决方案尤为重要 通常会遵循以下规则&#xff1a; 可以编写局部css&#xff0c;不会随意污染其他组件内的原生&#xff1b;可以编写动态的css&#xff0c;可以获取当前组件的一些状态&#xff0c;根据状态的变化生成不同的css样式&#…

SpringCloud-Sentinel

一、介绍 &#xff08;1&#xff09;提供界面配置配置服务限流、服务降级、服务熔断 &#xff08;2&#xff09;SentinelResource的blockHandler只处理后台配置的异常&#xff0c;运行时异常fallBack处理&#xff0c;且资源名为value时才生效&#xff0c;走兜底方法 二、安装…

Anaconda创建新的虚拟环境及Jupyter Notebok中、PyCharm中环境的使用

Anaconda创建新的虚拟环境 在windows开始菜单中【徽标键】&#xff0c;查找Anaconda文件夹并打开【Anaconda Prompt】 查看已有虚拟环境 conda env list1.创建 conda create --name mytest python3.7 # 创建一个名称为mytest&#xff0c;python版本为3.7的虚拟环境输入【…

济南双软认定办理流程,软件企业认定申报材料

具体流程及需要材料&#xff1a; 第一步&#xff1a;软件着作权 材料&#xff1a;源代码前后各30页&#xff0c;软件说明书&#xff0c;企业营业执照公章、软件着作权的申请表。统一提交中国版权中心?? 第二步&#xff1a;软件测评 材料&#xff1a;软件操作手册、说明书…

clion本地调试nginx-1.22.1

1 概述 nginx是一个多进程模型的流量代理软件&#xff0c;在本地调试时需要将它设置为单进程模式。 2 下载nginx源码 mkdir -p /opt/third-party cd /opt/third-party wget http://nginx.org/download/nginx-1.22.1.tar.gz tar xf nginx-1.22.1.tar.gz ls /opt/third-party…

Android振动器(Vibrator)

1.获取权限 振动器权限仅需静态申请 在清单文件中声明&#xff1a;android.permission.VIBRATE <uses-permission android:name"android.permission.VIBRATE"/> 2.振动器的使用 //获取系统服务-振动器 Vibrator vibrator (Vibrator) getSystemService(VIB…

Redis的持久化策略:RDB与AOF(面试题详解)

文章来源&#xff1a;Redis持久化的两种方式&#xff1a;RDB与AOF&#xff08;详解&#xff09;&#xff0c;订正了一些错误 一、概述&#xff1a; RDB和AOF持久化的由来&#xff1f; 因为Redis中的数据是基于内存的&#xff0c;所以如果出现服务器断电或者服务器宕机&#xf…

Java SOAP 调用 C# 的WebService

Java SOAP 调用 C# 的WebService&#xff0c;C# 的WebService方法的创建可以参考上一篇文章。IntelliJ IDEA Community Edition 2021.2.3的idea64.exe新建项目&#xff0c;导入需要的jar&#xff0c;代码如下&#xff1a; import org.apache.axis.client.Service; import org.…

教育行业如何通过互联网推广品牌?媒介盒子告诉你

近年来&#xff0c;国民对教育的重视程度日趋上升&#xff0c;教育行业也日益壮大&#xff0c;数字化时代的来临也使教育行业推广品牌的方式更加多样化&#xff0c;接下来媒介盒子就和大家分享&#xff1a;教育行业如何通过互联网推广品牌。 一、 发布软文进行品牌推广 数字…

js到vue到react的发展

介绍&#xff1a; JavaScript是一种基于对象和事件驱动的编程语言&#xff0c;在Web开发中占据着重要的地位。随着前端技术的不断发展&#xff0c;出现了一系列的框架和库&#xff0c;Vue和React是其中较为知名的两个。 Vue是一个轻量级的JavaScript框架&#xff0c;由尤雨溪…

项目部署Linux一般步骤

1、最小化安装centos7-环境准备 安装epel-release 安装epel-release&#xff0c;因为有些rpm包在官方库中找不到。前提是保证可以联网 yum install -y epel-release 修改IP net-tools net-tool&#xff1a;工具包集合&#xff0c;包含ifconfig等命令 yum install -y net-…

Android 使用 ToneGenerator 实现按键提示音

Android 使用 ToneGenerator 实现按键提示音 外部链接简单效果功能简单实现工具类线程池工具主页面简单实现 外部链接 DTMF原理 处理音频输出的变化 ToneGenerator API 简单效果 功能简单实现 工具类 package com.xg.practise.utilimport android.app.Activity import and…

2023年【安全生产监管人员】考试题及安全生产监管人员考试内容

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年【安全生产监管人员】考试题及安全生产监管人员考试内容&#xff0c;包含安全生产监管人员考试题答案和解析及安全生产监管人员考试内容练习。安全生产模拟考试一点通结合国家安全生产监管人员考试最新大纲及安…

(完全解决)如何输入一个图的邻接矩阵(每两个点的亲密度矩阵affinity),然后使用sklearn进行谱聚类

文章目录 背景输入点直接输入邻接矩阵 背景 网上倒是有一些关于使用sklearn进行谱聚类的教程&#xff0c;但是这些教程的输入都是一些点的集合&#xff0c;然后根据谱聚类的原理&#xff0c;其会每两个点计算一次亲密度&#xff08;可以认为两个点距离越大&#xff0c;亲密度越…