コードの自動フォーマット

このクックブックは、Droidがファイルを編集した後に自動的にコードをフォーマットし、手動での介入なしにプロジェクト全体で一貫したコードスタイルを確保する方法を示します。

動作原理

フック：

ファイル編集時にトリガー: WriteまたはEditツールコール後に実行
ファイル種別を検出: ファイル拡張子をチェックしてフォーマッターを決定
適切なフォーマッターを実行: prettier、black、gofmt、rustfmtなどを実行
フィードバックを提供: フォーマット結果をユーザーに報告
エラーを適切に処理: フォーマットが失敗しても継続

前提条件

あなたの言語スタックに対応するフォーマッターをインストールしてください：

npm install -D prettier

pip install black isort

# gofmt is included with Go installation
go version

rustup component add rustfmt

基本セットアップ

単一言語プロジェクト

JavaScript/TypeScriptプロジェクトの場合、.factory/hooks.jsonに以下を追加してください：

{
  "PostToolUse": [
    {
      "matcher": "Create|Edit|ApplyPatch",
      "hooks": [
        {
          "type": "command",
          "command": "jq -r '.tool_input.file_path' | { read file_path; if echo \"$file_path\" | grep -qE '\\.(ts|tsx|js|jsx)$'; then npx prettier --write \"$file_path\" 2>&1 && echo \"✓ Formatted $file_path\"; fi; }",
          "timeout": 30
        }
      ]
    }
  ]
}

多言語プロジェクト

複数の言語を使用するプロジェクトでは、異なるファイル種別を処理するスクリプトを使用します。 .factory/hooks/format.shを作成してください：

#!/bin/bash
set -e

# Read the hook input
input=$(cat)
file_path=$(echo "$input" | jq -r '.tool_input.file_path')

# Skip if file doesn't exist
if [ ! -f "$file_path" ]; then
  exit 0
fi

# Determine formatter based on file extension
case "$file_path" in
  *.ts|*.tsx|*.js|*.jsx|*.json|*.css|*.scss|*.md|*.mdx)
    if command -v prettier &> /dev/null; then
      prettier --write "$file_path" 2>&1
      echo "✓ Formatted with Prettier: $file_path"
    fi
    ;;
  *.py)
    if command -v black &> /dev/null; then
      black "$file_path" 2>&1
      echo "✓ Formatted with Black: $file_path"
    fi
    if command -v isort &> /dev/null; then
      isort "$file_path" 2>&1
      echo "✓ Sorted imports with isort: $file_path"
    fi
    ;;
  *.go)
    if command -v gofmt &> /dev/null; then
      gofmt -w "$file_path" 2>&1
      echo "✓ Formatted with gofmt: $file_path"
    fi
    ;;
  *.rs)
    if command -v rustfmt &> /dev/null; then
      rustfmt "$file_path" 2>&1
      echo "✓ Formatted with rustfmt: $file_path"
    fi
    ;;
  *.java)
    if command -v google-java-format &> /dev/null; then
      google-java-format -i "$file_path" 2>&1
      echo "✓ Formatted with google-java-format: $file_path"
    fi
    ;;
  *)
    # No formatter for this file type
    exit 0
    ;;
esac

exit 0

スクリプトを実行可能にします：

chmod +x .factory/hooks/format.sh

.factory/hooks.jsonに追加してください：

{
  "PostToolUse": [
    {
      "matcher": "Create|Edit|ApplyPatch",
      "hooks": [
        {
          "type": "command",
          "command": "\"$DROID_PROJECT_DIR\"/.factory/hooks/format.sh",
          "timeout": 30
        }
      ]
    }
  ]
}

高度な設定

カスタム設定でフォーマット

プロジェクト固有のprettier設定を使用：

{
  "PostToolUse": [
    {
      "matcher": "Create|Edit|ApplyPatch",
      "hooks": [
        {
          "type": "command",
          "command": "jq -r '.tool_input.file_path' | { read file_path; if echo \"$file_path\" | grep -qE '\\.(ts|tsx|js|jsx)$'; then npx prettier --config \"$DROID_PROJECT_DIR\"/.prettierrc --write \"$file_path\" 2>&1; fi; }",
          "timeout": 30
        }
      ]
    }
  ]
}

リントとフォーマット

フォーマットとリント修正を組み合わせます。 .factory/hooks/format-and-lint.shを作成してください：

#!/bin/bash
set -e

input=$(cat)
file_path=$(echo "$input" | jq -r '.tool_input.file_path')

if [ ! -f "$file_path" ]; then
  exit 0
fi

case "$file_path" in
  *.ts|*.tsx|*.js|*.jsx)
    # Format with prettier
    if command -v prettier &> /dev/null; then
      prettier --write "$file_path" 2>&1
      echo "✓ Formatted: $file_path"
    fi

    # Fix lint issues
    if command -v eslint &> /dev/null; then
      eslint --fix "$file_path" 2>&1 || true
      echo "✓ Linted: $file_path"
    fi
    ;;
  *.py)
    # Format with black
    if command -v black &> /dev/null; then
      black "$file_path" 2>&1
      echo "✓ Formatted with Black: $file_path"
    fi

    # Sort imports
    if command -v isort &> /dev/null; then
      isort "$file_path" 2>&1
      echo "✓ Sorted imports: $file_path"
    fi

    # Run flake8 for style issues
    if command -v flake8 &> /dev/null; then
      flake8 "$file_path" 2>&1 || true
      echo "✓ Checked with flake8: $file_path"
    fi
    ;;
esac

exit 0

スクリプトを実行可能にします：

chmod +x .factory/hooks/format-and-lint.sh

.factory/hooks.jsonに追加してください：

{
  "PostToolUse": [
    {
      "matcher": "Create|Edit|ApplyPatch",
      "hooks": [
        {
          "type": "command",
          "command": "\"$DROID_PROJECT_DIR\"/.factory/hooks/format-and-lint.sh",
          "timeout": 45
        }
      ]
    }
  ]
}

条件付きフォーマット

特定のディレクトリ内のファイルのみをフォーマットします。 .factory/hooks/format-src-only.shを作成してください：

#!/bin/bash
set -e

input=$(cat)
file_path=$(echo "$input" | jq -r '.tool_input.file_path')

# Only format files in src/ or packages/ directories
if ! echo "$file_path" | grep -qE '^(src/|packages/)'; then
  exit 0
fi

case "$file_path" in
  *.ts|*.tsx|*.js|*.jsx)
    if command -v prettier &> /dev/null; then
      prettier --write "$file_path" 2>&1
      echo "✓ Formatted: $file_path"
    fi
    ;;
esac

exit 0

スクリプトを実行可能にします：

chmod +x .factory/hooks/format-src-only.sh

.factory/hooks.jsonに追加してください：

{
  "PostToolUse": [
    {
      "matcher": "Create|Edit|ApplyPatch",
      "hooks": [
        {
          "type": "command",
          "command": "\"$DROID_PROJECT_DIR\"/.factory/hooks/format-src-only.sh",
          "timeout": 30
        }
      ]
    }
  ]
}

実例

例1: Reactコンポーネントのフォーマット

フック前
フック後

// Droid creates this file
import React from 'react';
import {useState} from 'react';

export const Button = ({onClick,label}:{onClick:()=>void;label:string})=>{
const [loading,setLoading]=useState(false);
return <button onClick={onClick} disabled={loading}>{label}</button>
}

// Automatically formatted by prettier
import React, { useState } from 'react';

export const Button = ({
  onClick,
  label,
}: {
  onClick: () => void;
  label: string;
}) => {
  const [loading, setLoading] = useState(false);
  return (
    <button onClick={onClick} disabled={loading}>
      {label}
    </button>
  );
};

Imports consolidated, spacing fixed, formatting applied

例2: Pythonインポートソート

フック前
フック後

# Droid creates this file
from typing import Optional
import sys
from django.db import models
import os
from myapp.utils import helper

def process_data(data: Optional[str]) -> None:
    if data:
        helper(data)

# Automatically formatted by black and isort
import os
import sys
from typing import Optional

from django.db import models

from myapp.utils import helper


def process_data(data: Optional[str]) -> None:
    if data:
        helper(data)

importを標準ライブラリ、サードパーティ、ローカルグループに整理

ベストプラクティス

フォーマッターは、文字列形式や行継続の変更など、微妙なバグを混入させることがあります。コミット前に必ず変更を確認してください。

読み取り専用モードから始める

まずフォーマッター設定を手動でテストします:

# Dry run to see what would change
prettier --check src/
black --check src/

一貫した設定ファイルを使用

フォーマッター設定がコミットされていることを確認します:

# Add to version control
git add .prettierrc .prettierignore
git add pyproject.toml  # for black config

適切なタイムアウトを設定

大きなファイルにはより長い時間が必要な場合があります:

{
  "timeout": 60  // Increase for large files
}

フォーマッターエラーを適切に処理する

フォーマットに失敗してもDroidをブロックしないようにします:

# Use || true to continue on errors
prettier --write "$file_path" 2>&1 || true

Gitフック連携を検討する

一貫性のためpre-commitフックと組み合わせます:

# .pre-commit-config.yaml
repos:
  - repo: https://github.com/pre-commit/mirrors-prettier
    rev: v3.0.0
    hooks:
      - id: prettier

トラブルシューティング

フォーマッターが見つからない

問題: command not foundエラー 解決策: フォーマッターをグローバルにインストールするか、npx/プロジェクトバイナリを使用してください：

# Install globally
npm install -g prettier

# Or use project version
npx prettier --write "$file_path"

フォーマットによりコードが破損

問題: フォーマッターが構文エラーを引き起こす 解決策: フォーマット後にファイル検証を追加してください：

# For TypeScript
prettier --write "$file_path"
tsc --noEmit "$file_path" || echo "⚠️ Type errors after formatting"

フックの実行が遅い

問題: フォーマットに時間がかかりすぎる 解決策: 変更されたファイルのみをフォーマットし、より高速なフォーマッターを使用してください：

# Skip files that haven't changed
if git diff --quiet "$file_path"; then
  exit 0
fi

エディターのフォーマットと競合

問題: エディターとフックが異なるフォーマットを行う 解決策: 両方で同じ設定を使用してください：

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.configPath": ".prettierrc"
}

​動作原理

​前提条件

​基本セットアップ

​単一言語プロジェクト

​多言語プロジェクト

​高度な設定

​カスタム設定でフォーマット

​リントとフォーマット

​条件付きフォーマット

​実例

​例1: Reactコンポーネントのフォーマット

​例2: Pythonインポートソート

​ベストプラクティス

​トラブルシューティング

​フォーマッターが見つからない

​フォーマットによりコードが破損

​フックの実行が遅い

​エディターのフォーマットと競合

​関連情報

動作原理

前提条件

基本セットアップ

単一言語プロジェクト

多言語プロジェクト

高度な設定

カスタム設定でフォーマット

リントとフォーマット

条件付きフォーマット

実例

例1: Reactコンポーネントのフォーマット

例2: Pythonインポートソート

ベストプラクティス

トラブルシューティング

フォーマッターが見つからない

フォーマットによりコードが破損

フックの実行が遅い

エディターのフォーマットと競合

関連情報