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

Git能在特定的重要动作发生时触发自定义脚本。有两组这样的钩子：客户端的和服务器端的。客户端钩子由诸如提交和合并这样的操作所调用，而服务器端钩子作用于诸如接收被推送的提交这样的联网操作, 我们目前使用的大多数是客户端钩子。

通过[husky](https://github.com/typicode/husky)集成[git hooks](https://git-scm.com/book/zh/v2/%E8%87%AA%E5%AE%9A%E4%B9%89-Git-Git-%E9%92%A9%E5%AD%90), 如果对git想有更全面的理解推荐阅读[GIt文档](https://git-scm.com/book/zh/v2)。

husky会安装一系列的git hook到项目的.git/hook目录中。

下面两张图分别对比没有安装husky与安装了husky的git目录区别:

当你用 git init 初始化一个新版本库时，Git 默认会在这个目录中放置一些示例脚本(.sample结尾的文件)。

pre-commit

pre-commit 钩子在键入提交信息前运行。它用于检查即将提交的快照，你可以利用该钩子，来检查代码风格是否一致（运行类似 lint 的程序。

- [lint-staged](https://github.com/okonet/lint-staged): 可以获取所有被提交的文件并执行配置好的任务命令,各种lint校验工具可以配置好lint-staged任务中。

- [prettier](https://prettier.io/): 可以配置到lint-staged中, 实现自动格式化编码风格。

- [stylelint](https://github.com/stylelint/stylelint)

- [eslint](https://cn.eslint.org/)

- [tslint](https://github.com/palantir/tslint)

- [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue): Vue.js官方推荐的lint工具

关于[为什么选择prettier, 以及eslint 与prettier区别?](https://zhuanlan.zhihu.com/p/62542268)。

关于[prettier配置](https://prettier.io/docs/en/configuration.html)。

关于[stylelint配置](https://stylelint.io/user-guide/configuration/)。

关于[eslint配置](https://cn.eslint.org/docs/user-guide/configuring)。

commit-msg

[commitlint](https://github.com/conventional-changelog/commitlint)。

commit-msg 可以用来在提交通过前验证项目状态或提交信息, 使用该钩子来核对提交信息是否遵循指定的模板。

关于git hooks在package.json配置:

测试

unittest

- [Jest](https://jestjs.io/ 
 
) 
 
- [Mocha](https://mochajs.org/ 
 
) 

e2e

- [Nightwatch](http://nightwatchjs.org/ 
 
) 
 
- [Cypress](https://www.cypress.io/ 
 
) 

CHANGELOG

更新日志, [standard-version](https://github.com/conventional-changelog/standard-version)。

Code Review

* [待定] Review制度,我们目前公司在代码merge时候多人审核才通过。

如何快速落地到当前业务

前端脚手架(xx-cli)

采用中心化集中管理代码扫描配置文件的思路, 把code lint配置文件做成一个npm包发到内网, 然后扩展脚手架命令一键执行下发远程配置文件到本地项目, 并且把新增的package.json依赖打进来, 大家后面再安装新的依赖即可。

所谓中心化管理: 所有项目代码配置文件以远程配置文件为准, 如果你本地有同名配置会被删除, 这样方便后续我们更新配置文件比如(增加vw/vh适配), 以及所有业务同步问题。

```

目前只有基于vue.js项目的lint脚本命令, 后续有别的项目, 考虑通过

xx-cli lint -- vue

xx-cli lint -- node

扩展

```

demo演示

demo演示如何在旧项目中植入代码质量检测?

由于这部分是在内网演示就不发不出来了。

至于脚手架可以参考我之前的demo[easy-cli](https://github.com/NuoHui/easy-cli)。这是比较全的demo。

Future

J ekins自动化

[Sonar](https://www.sonarqube.org/)

[Github:](https://github.com/SonarSource/sonarqube)

SonarQube 是一款领先的持续代码质量监控平台，开源在github 上，可以轻松配置在内网服务器，实时监控代码，帮助了解提升提升团队项目代码质量。通过插件机制，SonarQube可以继承不同的测试工具，代码分析工具，以及持续集成工具。

与持续集成工具（例如 Hudson/Jenkins 等）不同，SonarQube 并不是简单地把不同的代码检查工具结果（例如 FindBugs，PMD 等）直接显示在 Web 页面上，而是通过不同的插件对这些结果进行再加工处理，通过量化的方式度量代码质量的变化，从而可以方便地对不同规模和种类的工程进行代码质量管理。

行业内提到"代码质量管理, 自动化质量管理", 一般指的都是通过Sonar来实现。

用Sonar能够实现什么?

- 技术债务(sonar根据"规则"扫描出不符合规则的代码)

- 覆盖率(单元测试覆盖率)

- 重复(重复的代码, 有利于提醒封装)

- 结构

- …

sonarjs

sonar支持多种编程语言, 其中包括JavaScript. 如[sonarjs](https://www.sonarsource.com/products/codeanalyzers/sonarjs.html).

（编辑：晋中站长网）

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