code-formatter-installer について
code-formatter-installer は、プロジェクトの技術スタックに合わせてフォーマットとリンティングを整える開発者向けスキルです。設定ファイルやスクリプトから、エディター、フック、CI までを扱います。
主な機能
- 01JavaScript/TypeScript、Python、Go、Rust の検出
- 02スタックに合うフォーマッターとリンターの選定
- 03設定ファイルとパッケージスクリプトの作成
- 04エディター、Git フック、CI の設定ガイド
- 05一般的なフレームワーク向けテンプレート
活用シーン
- 01新規プロジェクトのフォーマットと lint ルールの統一
- 02コミット前のコード自動フォーマット
- 03CI でのフォーマットと lint の確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ patricio0312rev/ skills --skill code-formatter-installerインストール後、Claude Code で/code-formatter-installerを入力して読み込まれたか確認します。
詳細
コードフォーマッターとリンターのインストーラー
プロジェクト全体で一貫したコードフォーマットとリンティングを確立します。
コアワークフロー
- スタックを検出:言語/フレームワークを特定します(JS/TS、Python、Go、Rust)
- ツールを選択:適切なフォーマッターとリンターを選択します
- 設定を生成:ベストプラクティスに沿ったルールで設定ファイルを作成します
- スクリプトを追加:フォーマット/リンティング用の npm/パッケージスクリプトを含めます
- エディターを設定:VS Code、IntelliJ、Vim の設定を提供します
- pre-commit を設定:フォーマットを自動化する git フックを追加します
- CI を統合:GitHub Actions または CI 設定を提案します
スタック別のツール選択
JavaScript/TypeScript
- フォーマッター:Prettier
- リンター:ESLint + typescript-eslint
- エディター:EditorConfig
- フック:Husky + lint-staged
Python
- フォーマッター:Black + isort
- リンター:Ruff または Flake8 + mypy
- フック:pre-commit
Go
- フォーマッター:gofmt + goimports
- リンター:golangci-lint
Rust
- フォーマッター:rustfmt
- リンター:clippy
設定テンプレート
Prettier (.prettierrc.json)
{
"semi": true,
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 100,
"tabWidth": 2,
"arrowParens": "avoid"
}
ESLint (.eslintrc.json)
{
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"prettier"
],
"rules": {
"no-console": "warn",
"@typescript-eslint/no-unused-vars": "error"
}
}
EditorConfig (.editorconfig)
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.py]
indent_size = 4
[*.md]
trim_trailing_whitespace = false
Python (pyproject.toml)
[tool.black]
line-length = 100
target-version = ['py311']
[tool.isort]
profile = "black"
line_length = 100
[tool.mypy]
strict = true
warn_return_any = true
パッケージスクリプト
JavaScript/TypeScript (package.json)
{
"scripts": {
"format": "prettier --write .",
"format:check": "prettier --check .",
"lint": "eslint . --ext .ts,.tsx,.js,.jsx",
"lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx --fix",
"typecheck": "tsc --noEmit"
}
}
Python
# Makefile or scripts
format:
black .
isort .
lint:
ruff check .
mypy .
format-check:
black --check .
isort --check .
Git フックの設定
Husky + lint-staged (Node.js)
- 依存関係をインストールします。
npm install --save-dev husky lint-staged
npx husky init
- lint-staged を設定します(.lintstagedrc.json)。
{
"*.{ts,tsx,js,jsx}": ["eslint --fix", "prettier --write"],
"*.{json,md,yml}": ["prettier --write"]
}
- pre-commit フックを追加します(.husky/pre-commit)。
#!/bin/sh
npx lint-staged
pre-commit (Python)
- .pre-commit-config.yaml を作成します。
repos:
- repo: https://github.com/psf/black
rev: 24.1.1
hooks:
- id: black
- repo: https://github.com/pycqa/isort
rev: 5.13.2
hooks:
- id: isort
- repo: https://github.com/astral-sh/ruff-pre-commit
rev: v0.2.0
hooks:
- id: ruff
args: [--fix]
- repo: https://github.com/pre-commit/mirrors-mypy
rev: v1.8.0
hooks:
- id: mypy
- インストールします。
pip install pre-commit
pre-commit install
エディターの設定
VS Code (settings.json)
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[python]": {
"editor.defaultFormatter": "ms-python.black-formatter"
}
}
VS Code 拡張機能 (.vscode/extensions.json)
{
"recommendations": [
"esbenp.prettier-vscode",
"dbaeumer.vscode-eslint",
"editorconfig.editorconfig",
"ms-python.black-formatter"
]
}
IntelliJ/WebStorm
- 有効化:Settings → Languages & Frameworks → JavaScript → Prettier → On save
- 有効化:Settings → Tools → Actions on Save → Reformat code
CI の統合
GitHub Actions (.github/workflows/lint.yml)
name: Lint
on: [push, pull_request]
jobs:
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
- run: npm ci
- run: npm run format:check
- run: npm run lint
- run: npm run typecheck
マージ前チェック
# .github/workflows/pr-checks.yml
- name: Check formatting
run: |
npm run format:check || {
echo "Code is not formatted. Run 'npm run format' locally."
exit 1
}
インストールチェックリスト
セットアップごとに、以下を用意します。
- 設定ファイル(.prettierrc、.eslintrc、.editorconfig など)
- 無視ファイル(.prettierignore、.eslintignore)
- パッケージスクリプト(format、lint、format:check、lint:fix)
- Git フック(husky/pre-commit)
- エディター設定(.vscode/settings.json)
- CI ワークフロー(.github/workflows/lint.yml)
- ドキュメント(lint/format の実行方法に関する README のセクション)
ベストプラクティス
- 最後にフォーマッターを実行:Prettier が他のフォーマットルールを上書きするようにします
- 設定を拡張:広く使われているプリセット(Airbnb、Standard など)を使用します
- 生成ファイルを無視:ビルド出力を無視ファイルに追加します
- フックをスキップ可能にする:緊急時に
git commit --no-verifyを使えるようにします - 手順を文書化:CONTRIBUTING.md に「コードスタイル」セクションを追加します
- クリーンインストールでテスト:ローカルのエディター設定がなくても設定が機能することを確認します
- ルールを最小限に保つ:厳格に始め、必要に応じて緩和します
一般的な設定
すぐに使える設定ファイルについては、assets/configs/ を参照してください。
- Next.js + TypeScript
- React + TypeScript
- Node.js + TypeScript
- Python FastAPI
- Python Django
バイパス手順(緊急時)
# Skip pre-commit hooks
git commit --no-verify
# Skip CI checks (not recommended)
git push --no-verify
バイパスが許容される状況(ホットフィックス、緊急時のみ)を文書化してください。
コメント
Markdown 対応