前端CR规范

617 阅读2分钟

why?

软件质量

提升软件质量,减少bug数

知识共享

每个人技术长板不一样,团队成员间通过互相Review可共同进步

代码质量

CR流程鞭策自身产出已读的、高质量代码

团队规范

形成规范,易于协作

CR CheckList

基本项

  • 代码是否正常工作,控制台不能出现error
  • 项目描述是否需要更新。(ReadMe是否完备,有项目启动修改时,检查是否需要更新ReadMe)。
  • 代码是否易于理解。
  • DRY。相同的代码是否重复了两次以上?(是否有插件?)
  • functions/classes/components 是否足够小? (建议或者限制文件、函数,组件行数?)
  • 组件、页面卸载时清除事件监听。
  • 变量、文件名、翻译遵循命名约定。(待梳理)
  • NPM 中删除了未使用的包。//npx depcheck
  • 是否易于测试 (包含 React components)? // 待建设单测能力

Codestyle

  • 无硬编码的值,使用constant (重复两次or以上)
  • 避免多个if/else
  • 删除注释的代码
  • 在生产环境清理控制台打印信息

ES6/7

  • 使用ES6语法。
  • 使用箭头函数传递this。
  • 使用 spread/rest 操作符。
  • 函数,结构可增加默认值。
  • 优先使用const而不是let (避免 var)。
  • 使用 import , export。
  • 使用模板字符串而不是字符串拼接。
  • 在数组或者对象中使用解构取值。
  • 使用 Promises 或者 Asyns/Await. 注意处理异常

React

React编码规范

三方库

  • 优先使用lodash/ramda而不是自己实现
  • 是否有更优秀的库我们不知道?// npm trend

How

借助工具自动化完成代码风格检查,checkList尽量用于自检,线下主V功能层面、异常、涉及模式和最佳实践方面

编码阶段遵循编码规范和最佳实践,通过配置编辑器,解决lint和格式问题

入库阶段借助工具,运行lint、prettier命令规范代码

线下CR阶段主要检视代码功能设计,是否可复用,异常及设计模式等方面

image.png

参考链接:

react checklist

code review

UT guide

CR最佳实践

betterCR for react\