Git目前是毫无争议的项目版本管理的王者,而前端的项目大了之后我们通常需要利用一些Git Hooks来保证项目的质量。包括但不限于:
eslint tslint 单元测试 E2E测试 style lint commit lint others checks 有的同学可能要说,没有这些项目质量也会很好,是的,一般这么说的,要么项目小,要么团队人少。如果你的项目人数>30,又是多分支开发的话,就会大概率需要这玩意。
初识Husky 原生的Git Hooks写法比较麻烦,Husky 做了比较好的封装。截止本文发布之日(2021-03-07),Husky已经发布了5.x版本,建议使用最新的版本,因为它有几个优势:
0依赖,没有依赖第三方的任何JS包 轻量,20K左右,Husky4要1MB 快,0.01s的量级,Husky要0.5s 跨平台,Linux、macOS、Windows都支持 安装 npm install husky --save-dev && npx husky init 是,就这一句就够了,自动会初始项目。观察你的项目,你会发现多了一个.husky目录,package.json中添加了prepare的命令:
添加ESLint 这里有一个策略,如果每次提交都进行全局的ESLint Check的话,效率会很慢。所以我们需要添加一个策略,就是每次提交的时候,只对你所修改的文件的做ESLint,这样效率会提高不少。要实现这个功能,需要借助一个非常好用的包:lint-staged。
先安装:
npm install lint-staged --save-dev 配置命令:
lint-staged有多种配置方法。
package.json .lintstagedrc .lintstagedrc.json .lintstagedrc.yaml .lintstagedrc.yml lint-staged.config.js, .lintstagedrc.js, or .lintstagedrc.cjs file in JS format 我个人还是习惯用package.json里写,也可以选择其他的。uni-app的Lint配置比较特殊,配置如下:
"lint-staged": { "src/**/*.{js,ts,tsx,vue}": [ "vue-cli-service lint --fix src" ] }, 老的写法里还会加上git add这种,新版本已经不用了,都会自动加上。
配置Commit Lint 说起Commit Lint,有一个非常牛逼的库推荐给大家:conventional-changelog/commitlint: 📓 Lint commit messages
继续阅读