1. husky 是什么
husky 是一个 Git Hook 工具。本文主要实现提交前 eslint 校验和 commit 信息的规范校验简单说就是,当我们运行 git commmit -m ‘xxx’ 时，用来检查 xxx 是否满足固定格式的工具使用这个工具的目的, 实现下图效果通过提交记录一目了然,我们本次提交了做了哪些操作,便于后续维护和统一规范
2. 安装
需要安装以下依赖
// 使用 yarn
yarn add husky lint-staged @commitlint/cli @commitlint/config-conventional --dev
// 使用 npm
npm i -D husky lint-staged @commitlint/cli @commitlint/config-conventional
3. 创建
3.1 创建.huskyrc (文件目录 package.json)
{
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
}
如果是js文件根目录 .huskyrc.js
module.exports = {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
}
3.2 创建.lintstagedrc
{
"src/**/*.js": "eslint"
}
cache 只检查已更改的文件(可加可不加) fix 可以自动修复错误 git add 是把lint后的代码重新提交到缓存区
{
"src/**/*.js": ["eslint --cache --fix", "git add"]
}
3.3 package.json 中表现
{
"name": "xxx",
"version": "1.1.0",
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
"lint-staged": {
"src/**/*.js": [
"eslint --fix","git add"
],
"src/**/*.vue": [
"eslint --fix","git add"
],
"src/**/*.css": [
"stylelint --fix","git add"
]
},
"devDependencies": {
"@commitlint/cli": "^9.1.1",
"@commitlint/config-conventional": "^9.1.1",
"husky": "^4.2.5",
"lint-staged": "^10.3.0"
}
}
3. 创建 .commitlint.js
module.exports = {
extends: ["@commitlint/config-conventional"],
rules: {
"type-enum": [
2,
"always",
[
"build", // 发布版本
"chore", // 改变构建流程、或者增加依赖库、工具等
"ci", // 持续集成修改
"docs", // 文档修改
"feat", // 新增功能
"fix", // 修复缺陷
"perf", // 优化相关，比如提升性能、体验
"refactor", // 代码重构
"revert", // 回退版本
"style", // 样式修改
"test", // 测试用例修改
],
],
},
};
4. 使用
git commit -m"fix: 修复xxxx"
5. 另外的解决方案
因为每次提交lint代码,提交的时间会长一点,如果不想这样,可以自己配置一次性格式化
全文件lint vue-cli3举例,在package.json配置如下代码
"scripts": {
"lint": "vue-cli-service lint"
},
然后每次提交前执行
yarn lint 或者 npm run lint
单组件 亦或者每次写完页面lint一下,vscode安装eslint扩展 配置json
// eslint保存fix配置
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
单组件 Ctrl + S 就OK了
