mcpField
C
code-formatter-installer

code-formatter-installer

github.com/patricio0312rev開発63264 回インストール41 週間前に更新
リポジトリ

code-formatter-installer について

code-formatter-installer は、プロジェクトの技術スタックに合わせてフォーマットとリンティングを整える開発者向けスキルです。設定ファイルやスクリプトから、エディター、フック、CI までを扱います。

主な機能

  1. 01JavaScript/TypeScript、Python、Go、Rust の検出
  2. 02スタックに合うフォーマッターとリンターの選定
  3. 03設定ファイルとパッケージスクリプトの作成
  4. 04エディター、Git フック、CI の設定ガイド
  5. 05一般的なフレームワーク向けテンプレート

活用シーン

  1. 01新規プロジェクトのフォーマットと lint ルールの統一
  2. 02コミット前のコード自動フォーマット
  3. 03CI でのフォーマットと lint の確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/patricio0312rev/skills --skill code-formatter-installer

インストール後、Claude Code で/code-formatter-installerを入力して読み込まれたか確認します。

詳細

コードフォーマッターとリンターのインストーラー

プロジェクト全体で一貫したコードフォーマットとリンティングを確立します。

コアワークフロー

  1. スタックを検出:言語/フレームワークを特定します(JS/TS、Python、Go、Rust)
  2. ツールを選択:適切なフォーマッターとリンターを選択します
  3. 設定を生成:ベストプラクティスに沿ったルールで設定ファイルを作成します
  4. スクリプトを追加:フォーマット/リンティング用の npm/パッケージスクリプトを含めます
  5. エディターを設定:VS Code、IntelliJ、Vim の設定を提供します
  6. pre-commit を設定:フォーマットを自動化する git フックを追加します
  7. 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)
  1. 依存関係をインストールします。
npm install --save-dev husky lint-staged
npx husky init
  1. lint-staged を設定します(.lintstagedrc.json)。
{
  "*.{ts,tsx,js,jsx}": ["eslint --fix", "prettier --write"],
  "*.{json,md,yml}": ["prettier --write"]
}
  1. pre-commit フックを追加します(.husky/pre-commit)。
#!/bin/sh
npx lint-staged
pre-commit (Python)
  1. .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
  1. インストールします。
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 のセクション)

ベストプラクティス

  1. 最後にフォーマッターを実行:Prettier が他のフォーマットルールを上書きするようにします
  2. 設定を拡張:広く使われているプリセット(Airbnb、Standard など)を使用します
  3. 生成ファイルを無視:ビルド出力を無視ファイルに追加します
  4. フックをスキップ可能にする:緊急時に git commit --no-verify を使えるようにします
  5. 手順を文書化:CONTRIBUTING.md に「コードスタイル」セクションを追加します
  6. クリーンインストールでテスト:ローカルのエディター設定がなくても設定が機能することを確認します
  7. ルールを最小限に保つ:厳格に始め、必要に応じて緩和します

一般的な設定

すぐに使える設定ファイルについては、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

バイパスが許容される状況(ホットフィックス、緊急時のみ)を文書化してください。

コメント