1. husky 是什么
husky 是一个 Git Hook 工具。本文主要实现提交前 eslint 校验和 commit 信息的规范校验简单说就是,当我们运行 git commmit -m ‘xxx’ 时，用来检查 xxx 是否满足固定格式的工具使用这个工具的目的, 实现下图效果通过提交记录一目了然,我们本次提交了做了哪些操作,便于后续维护和统一规范2. 安装
需要安装以下依赖
// 使用 yarnyarn add husky lint-staged @commitlint/cli @commitlint/config-conventional --dev// 使用 npmnpm 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了
