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

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).

（编辑：湖南网）

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