设为首页 - 加入收藏 伊春站长网 (http://www.0458zz.com)- 国内知名站长资讯网站,提供最新最全的站长资讯,创业经验,网站建设等!
热搜: 用户 2018 芯片 驱动
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

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

发布时间:2019-09-17 07:14 所属栏目:[优化] 来源:xyz
导读:What 什么是代码本身的质量? 代码本身的质量: 包括复杂度, 重复率, 代码风格等。 复杂度: 项目代码量,模块大小,耦合度等 重复率: 重复出现的代码区块占比,通常要求在5%以下(借助平台化工具如Sonar) 代码风格: 代码风格是否统一(动态语言代码如JS, Pytho

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.?无法从团队整体层面上体现各个项目的质量状况对比

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

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

* * *

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

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

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

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章