如何保证前端项目代码质量

What

什么是代码本身的质量?

代码本身的质量: 包括复杂度, 重复率, 代码风格等。

复杂度: 项目代码量，模块大小，耦合度等

重复率: 重复出现的代码区块占比，通常要求在5%以下(借助平台化工具如Sonar)

代码风格: 代码风格是否统一(动态语言代码如JS, Python风格不受约束)

代码质量下降恶性循环

常见的代码质量下降的原因:

破罐破摔: 在烂代码上迭代代码罪恶感比较小

传染性: 不在意代码质量, 只关注业务的产出

心有余而力不足

常见的导致恶性循环的场景:

• 业务压力太大

烂代码产生的常见原因是业务压力大，导致没有时间或意愿讲究代码质量。因为向业务压力妥协而生产烂代码之后，开发效率会随之下降，进而导致业务压力更大，形成一种典型的恶性循环。

• 通过增加人力解决业务压力

为了应对业务压力，常见的做法就是向项目中增加人力，但是单纯地增加人力的话，会因为风格不一致、沟通成本上升等原因导致烂代码更多。

那么我们应该如何解决呢?

这是一个长期坚持的过程。

代码质量管控四个阶段

• 规范化

建立代码规范与Code Review制度

1. [airbnb](https://github.com/airbnb/javascript)

2. [standard](https://github.com/standard/standard)

3. [node-style-guide](https://github.com/felixge/node-style-guide)

4. [google javascript style guide](https://google.github.io/styleguide/jsguide.html)

5. [google html/css style guide](https://google.github.io/styleguide/htmlcssguide.html)

6. [Vue风格指南](https://cn.vuejs.org/v2/style-guide/)

7. 我觉得统一项目目录结构也是规范化的一种(比如我们用脚手架创建项目模板), 一个规范化的目录结构大大降低新人的上手成本。

• 自动化

使用工具(linters)自动检查代码质量。

• 流程化

将代码质量检查与代码流动过程绑定。

质量检查与代码流动绑定后的效果：

备注:

1. 编辑时候: 通过编辑器插件, 实时查看质量检查

2. 可以利用CI(Jekins/Travis)把构建发布过程搬到线上, 先跑代码扫描, 测试代码等, 然后没有错误再进行build, build成功通过ssh推到服务器。

• 中心化

以团队整体为视角，集中管理代码规范，并实现质量状况透明化。

当团队规模越来越大，项目越来越多时，代码质量管控就会面临以下问题：

1. 不同项目使用的代码规范不一样

2. 部分项目由于放松要求，没有接入质量检查，或者存在大量未修复的缺陷

3. 无法从团队整体层面上体现各个项目的质量状况对比

为了应对以上问题，需要建设中心化的代码质量管控体系，要点包括：

代码规范统一管理。通过脚手架命令垂直管理代码扫描配置规则集, 自动安装，不在本地写规则。一个团队、一类项目、一套规则。

* * *

* [待定] <u>使用统一的持续集成服务(Jekins/Travis等)。质量检查不通过的项目不能上线。</u>

* [待定]<u> 建立代码质量评分制度(借助Sonar)。让项目与项目之间能够横向对比，项目自身能够纵向对比，并且进行汇总反馈。</u>

Why

代码质量是团队技术水平和管理水平的直接体现。

看代码的时间远远多于写代码的时间

目前前端项目出现的问题

• 书写风格不统一, 阅读体验差

• 维护性差, 复用性差(Code Review互相进步)

• 容易出现低质量代码, 代码返工率高

• git commit不规范

How

通过哪些手段来保证代码质量

EditorConfig

[EditorConfig]( https://editorconfig.org/)在多人协作开发项目时候, 支持跨编辑器, IDE来支持维护一致的编码样式(文件格式)。

VSCode插件EditorConfig for VS Code提供一键生成.editorconfig。

查看[实例](https://editorconfig.org/#example-file)。

TypeScript

- [官网介绍](https://www.typescriptlang.org/

)。

- [中文awesome-typescript](https://github.com/semlinker/awesome-typescript)

- [TypeScript体系调研报告](https://juejin.im/post/59c46bc86fb9a00a4636f939)

- [2018年度JS趋势报告](https://2018.stateofjs.com/javascript-flavors/overview/)

Git Hooks

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!