husky、lint-staged、commitlint、 commitizen、适配器cz-git
Husky
************
官网
https://typicode.github.io/husky/zh/get-started.html
使用
- 安装 & 初始化
javascript
pnpm add --save-dev huskyjavascript
pnpm exec husky init完成初始化，并默认创建pre-commit钩子文件
- 新增钩子 commit-msg 文件
（参考下边commitlint 若无需要不需要新增）
lint-staged
官网
https://www.npmjs.com/package/lint-staged
使用
- 安装
javascript
pnpm add --save-dev lint-stagedjavascript
{
"lint-staged": {
"*": "your-cmd"
}
}
// 参考
"lint-staged": {
"src/**/*.{vue,js,jsx,cjs,mjs,ts,tsx}": "eslint --fix",
"src/**/*.{css,scss,vue}": "stylelint --fix",
"src/**/*": "prettier --write"
}在husky钩子中配置lint-staged
在husky 的钩子 pre-commit 文件中
javascript
npx lint-staged --allow-empty具体命令options
javascript
❯ npx lint-staged --help
Usage: lint-staged [options]
Options:
-V, --version output the version number
--allow-empty allow empty commits when tasks revert all staged changes (default: false)
-p, --concurrent <number|boolean> the number of tasks to run concurrently, or false for serial (default: true)
-c, --config [path] path to configuration file, or - to read from stdin
--cwd [path] run all tasks in specific directory, instead of the current
-d, --debug print additional debug information (default: false)
--diff [string] override the default "--staged" flag of "git diff" to get list of files.
Implies "--no-stash".
--diff-filter [string] override the default "--diff-filter=ACMR" flag of "git diff" to get list of
files
--max-arg-length [number] maximum length of the command-line argument string (default: 0)
--no-stash disable the backup stash, and do not revert in case of errors. Implies
"--no-hide-partially-staged".
--no-hide-partially-staged disable hiding unstaged changes from partially staged files
-q, --quiet disable lint-staged’s own console output (default: false)
-r, --relative pass relative filepaths to tasks (default: false)
-x, --shell [path] skip parsing of tasks for better shell support (default: false)
-v, --verbose show task output even when tasks succeed; by default only failed output is
shown (default: false)
-h, --help display help for command到这里，当你提交的时候，你会发现你提交的代码会被eslint stylelint 处理，简单错误会被自动修复，并完成了格式化，先前配置的样式顺序之类的也都自动完成处理
处理不了的问题就会error,拦截提交
- [x] 达成目的之 - 限制提交
commitlint
官网
https://commitlint.js.org/guides/getting-started.html
使用
- 安装
javascript
pnpm add --save-dev @commitlint/{cli,config-conventional}- 配置 (详细配置规则，参见官网)
- 根目录新增文件
javascript
{
extends: ['@commitlint/config-conventional'],
}- 配合husky钩子 commit-msg
- 在文件中新增
javascript
// 官网
npx --no -- commitlint --edit "$1"
npx --no-install commitlint --edit "$1"- [x] 到这里，完成对提交msg的限制
效果
其他
命令options
https://commitlint.js.org/reference/cli.html
javascript
❯ npx commitlint --help
@commitlint/cli@19.5.0 - Lint your commit messages
[input] reads from stdin if --edit, --env, --from and --to are omitted
Options:
-c, --color toggle colored output [boolean] [default: true]
-g, --config path to the config file; result code 9 if config is
missing [string]
--print-config print resolved config
[string] [choices: "", "text", "json"]
-d, --cwd directory to execute in
[string] [default: (Working Directory)]
-e, --edit read last commit message from the specified file or
fallbacks to ./.git/COMMIT_EDITMSG [string]
-E, --env check message in the file at path given by environment
variable value [string]
-x, --extends array of shareable configurations to extend [array]
-H, --help-url help url in error message [string]
-f, --from lower end of the commit range to lint; applies if
edit=false [string]
--from-last-tag uses the last tag as the lower end of the commit range to
lint; applies if edit=false and from is not set [boolean]
--git-log-args additional git log arguments as space separated string,
example '--first-parent --cherry-pick' [string]
-l, --last just analyze the last commit; applies if edit=false
[boolean]
-o, --format output format of the results [string]
-p, --parser-preset configuration preset to use for
conventional-commits-parser [string]
-q, --quiet toggle console output [boolean] [default: false]
-t, --to upper end of the commit range to lint; applies if
edit=false [string]
-V, --verbose enable verbose output for reports without problems
[boolean]
-s, --strict enable strict mode; result code 2 for warnings, 3 for
errors [boolean]
--options path to a JSON file or Common.js module containing CLI
options
-v, --version display version information [boolean]
-h, --help Show help [boolean]commitizen 适配器cz-git
介绍
commitizen：基于Node.js的 git commit 命令行工具，辅助生成标准化规范化的 commit message。https://github.com/commitizen/cz-cli
cz-git： 一款工程性更强，轻量级，高度自定义，标准输出格式的 commitizen 适配器
官网：https://cz-git.qbb.sh/zh/guide/introduction
适配器：更换 commitizen 命令行工具的 交互方式 插件
使用
- 安装
javascript
pnpm install -D cz-git commitizen- 在package.json中配置适配器来源 commitizen
javascript
"config": {
"commitizen": {
"path": "node_modules/cz-git"
}
}- 在package.json中配置脚本
javascript
"scripts": {
"commit": "git-cz"
},- 在commitlint.config.js中配置promot
可参考模版：https://cz-git.qbb.sh/zh/config/#%E7%BA%AF%E6%B1%89%E5%8C%96%E6%A8%A1%E6%9D%BF
javascript
export default {
extends: ['@commitlint/config-conventional'],
prompt: {
alias: { fd: 'docs: fix typos' },
messages: {
type: '选择你要提交的类型 :',
scope: '选择一个提交范围（可选）:',
customScope: '请输入自定义的提交范围 :',
subject: '填写简短精炼的变更描述 :\n',
body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',
breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',
footerPrefixesSelect: '选择关联issue前缀（可选）:',
customFooterPrefix: '输入自定义issue前缀 :',
footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
confirmCommit: '是否提交或修改commit ?'
},
types: [
{ value: 'feat', name: 'feat: ✨ 新增功能 | A new feature', emoji: ':sparkles:' },
{ value: 'fix', name: 'fix: 🐛 修复缺陷 | A bug fix', emoji: ':bug:' },
{
value: 'docs',
name: 'docs: 📝 文档更新 | Documentation only changes',
emoji: ':memo:'
},
{
value: 'style',
name: 'style: 💄 代码格式 | Changes that do not affect the meaning of the code',
emoji: ':lipstick:'
},
{
value: 'refactor',
name: 'refactor: ♻️ 代码重构 | A code change that neither fixes a bug nor adds a feature',
emoji: ':recycle:'
},
{
value: 'perf',
name: 'perf: ⚡️ 性能提升 | A code change that improves performance',
emoji: ':zap:'
},
{
value: 'test',
name: 'test: ✅ 测试相关 | Adding missing tests or correcting existing tests',
emoji: ':white_check_mark:'
},
{
value: 'build',
name: 'build: 📦️ 构建相关 | Changes that affect the build system or external dependencies',
emoji: ':package:'
},
{
value: 'ci',
name: 'ci: 🎡 持续集成 | Changes to our CI configuration files and scripts',
emoji: ':ferris_wheel:'
},
{
value: 'chore',
name: "chore: 🔨 其他修改 | Other changes that don't modify src or test files",
emoji: ':hammer:'
},
{
value: 'revert',
name: 'revert: ⏪️ 回退代码 | Reverts a previous commit',
emoji: ':rewind:'
}
],
useEmoji: false,
emojiAlign: 'center',
useAI: false,
aiNumber: 1,
themeColorCode: '',
scopes: [],
allowCustomScopes: true,
allowEmptyScopes: true,
customScopesAlign: 'bottom',
customScopesAlias: 'custom',
emptyScopesAlias: 'empty',
upperCaseSubject: false,
markBreakingChangeMode: false,
allowBreakingChanges: ['feat', 'fix'],
breaklineNumber: 100,
breaklineChar: '|',
// scope' | 'body' | 'breaking' | 'footerPrefix' | 'footer' | 'confirmCommit'
skipQuestions: ['scope', 'body', 'breaking', 'footerPrefix', 'footer', 'confirmCommit'],
issuePrefixes: [
// 如果使用 gitee 作为开发管理
{ value: 'link', name: 'link: 链接 ISSUES 进行中' },
{ value: 'closed', name: 'closed: 标记 ISSUES 已完成' }
],
// 跳过选择关联issue前缀
customIssuePrefixAlign: 'top',
emptyIssuePrefixAlias: 'skip',
customIssuePrefixAlias: 'custom',
allowCustomIssuePrefix: true,
allowEmptyIssuePrefix: true,
confirmColorize: true,
scopeOverrides: undefined,
defaultBody: '',
defaultIssues: '',
defaultScope: '',
defaultSubject: ''
}
};- 使用方式
javascript
npm run commit 代替 git commit -m ""- [x] 到这里，实现了交互式填写提交信息
效果
