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

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

（编辑：河北网）

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