What
什么是代码本身的质量?
代码本身的质量: 包括复杂度, 重复率, 代码风格等.
复杂度: 项目代码量, 模块大小, 耦合度等
重复率: 重复出现的代码区块占比, 通常要求在 5% 以下(借助平台化工具如 Sonar)
代码风格: 代码风格是否统一(动态语言代码如 JS, Python 风格不受约束)
代码质量下降恶性循环
常见的代码质量下降的原因:
破罐破摔: 在烂代码上迭代代码罪恶感比较小
传染性: 不在意代码质量, 只关注业务的产出
心有余而力不足
常见的导致恶性循环的场景:
业务压力太大
烂代码产生的常见原因是业务压力大, 导致没有时间或意愿讲究代码质量. 因为向业务压力妥协而生产烂代码之后, 开发效率会随之下降, 进而导致业务压力更大, 形成一种典型的恶性循环.
通过增加人力解决业务压力
为了应对业务压力, 常见的做法就是向项目中增加人力, 但是单纯地增加人力的话, 会因为风格不一致, 沟通成本上升等原因导致烂代码更多.
那么我们应该如何解决呢?
这是一个长期坚持的过程.
代码质量管控四个阶段
规范化
建立代码规范与 Code Review 制度
- [airbnb](https://github.com/airbnb/javascript)
- [standard](https://github.com/standard/standard)
- [node-style-guide](https://github.com/felixge/node-style-guide)
- [google JavaScript style guide](https://google.github.io/styleguide/jsguide.html)
- [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
Git 能在特定的重要动作发生时触发自定义脚本. 有两组这样的钩子: 客户端的和服务器端的. 客户端钩子由诸如提交和合并这样的操作所调用, 而服务器端钩子作用于诸如接收被推送的提交这样的联网操作, 我们目前使用的大多数是客户端钩子.
- -[stylelint](https://github.com/stylelint/stylelint)
- -[eslint](https://cn.eslint.org/)
- -[tslint](https://github.com/palantir/tslint)
- commit-msg
- [commitlint](https://github.com/conventional-changelog/commitlint).
- unittest
- - [Jest](https://jestjs.io/
- )
- - [Mocha](https://mochajs.org/
- )
- e2e
- - [Nightwatch](http://nightwatchjs.org/
- )
- - [Cypress](https://www.cypress.io/
- )
- CHANGELOG
- xx-cli lint -- vue
- xx-cli lint -- node
- [Sonar](https://www.sonarqube.org/)
- [GitHub:](https://github.com/SonarSource/sonarqube)
来源: http://www.tuicool.com/articles/NN3q6jq