关于 setup-pre-commit
为 JavaScript 项目配置提交前检查的 Skill。它安装并设置 Husky、lint-staged 和 Prettier,并在项目具备相应脚本时加入类型检查和测试。
主要功能
- 01根据锁文件识别包管理器
- 02安装 Husky、lint-staged 和 Prettier
- 03创建 Husky 提交前钩子
- 04用 lint-staged 格式化暂存文件
- 05加入可用的类型检查和测试命令
适用场景
- 01为 JavaScript 仓库添加提交前检查
- 02在提交前格式化暂存文件
- 03提交时运行类型检查和测试
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ c0nant/ c-skills --skill setup-pre-commit安装后在 Claude Code 中输入/setup-pre-commit确认已加载。
详细介绍
设置 pre-commit 钩子
配置内容
- Husky pre-commit 钩子
- lint-staged,对所有暂存文件运行 Prettier
- Prettier 配置(如缺失)
- pre-commit 钩子中的 typecheck 和 test 脚本
步骤
1. 检测包管理器
检查是否存在 package-lock.json(npm)、pnpm-lock.yaml(pnpm)、yarn.lock(yarn)、bun.lockb(bun)。使用存在的那一个。若无法判断,默认使用 npm。
2. 安装依赖
以 devDependencies 形式安装:
husky lint-staged prettier
3. 初始化 Husky
npx husky init
此命令会创建 .husky/ 目录,并在 package.json 中添加 prepare: "husky"。
4. 创建 .husky/pre-commit
写入以下文件(Husky v9+ 无需 shebang):
npx lint-staged
npm run typecheck
npm run test
调整:将 npm 替换为检测到的包管理器。如果 package.json 中没有 typecheck 或 test 脚本,则省略对应的行,并告知用户。
5. 创建 .lintstagedrc
{
"*": "prettier --ignore-unknown --write"
}
6. 创建 .prettierrc(如缺失)
仅在不存在 Prettier 配置时创建。使用以下默认值:
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"singleQuote": false,
"trailingComma": "es5",
"semi": true,
"arrowParens": "always"
}
7. 验证
-
.husky/pre-commit存在且可执行 -
.lintstagedrc存在 - package.json 中的
prepare脚本为"husky" -
prettier配置存在 - 运行
npx lint-staged,验证其是否正常工作
8. 提交
暂存所有已修改或新建的文件,并使用以下提交信息提交:Add pre-commit hooks (husky + lint-staged + prettier)
这次提交会经过新的 pre-commit 钩子运行,可作为一次冒烟测试,验证整体流程是否正常。
备注
- Husky v9+ 的钩子文件无需 shebang
prettier --ignore-unknown会跳过 Prettier 无法解析的文件(如图片等)- pre-commit 会先运行 lint-staged(快速,仅针对暂存文件),然后再运行完整的 typecheck 和 test
评论
支持 Markdown