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

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)

（编辑：西安站长网）

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