setup-pre-commit について
setup-pre-commitは、JavaScriptプロジェクトにコミット前チェックを設定するスキルです。ロックファイルからパッケージマネージャーを判定し、Husky、lint-staged、Prettierを設定して、利用可能な型チェックやテストをフックで実行します。
主な機能
- 01ロックファイルからのパッケージマネージャー判定
- 02Husky、lint-staged、Prettierの導入
- 03Huskyのpre-commitフック設定
- 04ステージ済みファイルのPrettier整形
- 05利用可能な型チェックとテストの実行
活用シーン
- 01コミット前のフォーマット追加
- 02コミット時の型チェック実行
- 03コミット時のテスト実行
- 04フック設定の検証とコミット
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ vinvcn/ mattpocock-skills-zh-cn --skill setup-pre-commitインストール後、Claude Code で/setup-pre-commitを入力して読み込まれたか確認します。
同梱ファイルagents/openai.yaml
README(原文)English
プロジェクトの README よりこの README の日本語訳はまだありません。以下は英語の原文です。日本語の紹介はページ上部をご覧ください。
设置 Pre-Commit Hooks
这会配置什么
- Husky pre-commit hook
- lint-staged 对所有 staged files 运行 Prettier
- Prettier config(如果缺失)
- pre-commit hook 中的 typecheck 和 test scripts
步骤
1. 检测 package manager
检查 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/ dir,并向 package.json 添加 prepare: "husky"。
4. 创建 .husky/pre-commit
写入这个文件(Husky v9+ 不需要 shebang):
npx lint-staged
npm run typecheck
npm run test
Adapt:把 npm 替换为检测到的 package manager。如果 repo 的 package.json 没有 typecheck 或 test script,就省略对应行并告知用户。
5. 创建 .lintstagedrc
{
"*": "prettier --ignore-unknown --write"
}
6. 创建 .prettierrc(如果缺失)
只有没有 Prettier config 时才创建。使用这些 defaults:
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"singleQuote": false,
"trailingComma": "es5",
"semi": true,
"arrowParens": "always"
}
7. 验证
-
.husky/pre-commit存在且可执行 -
.lintstagedrc存在 - package.json 中的
preparescript 是"husky" - prettier config 存在
- 运行
npx lint-staged验证可用
8. 提交
Stage 所有 changed/created files,并用 message 提交:Add pre-commit hooks (husky + lint-staged + prettier)
这会经过新的 pre-commit hooks,是一个不错的 smoke test。
备注
- Husky v9+ 不需要 hook files 中的 shebangs
prettier --ignore-unknown会跳过 Prettier 无法 parse 的 files(images 等)- pre-commit 先运行 lint-staged(快,只针对 staged files),再运行完整 typecheck 和 tests