# Prettier

## 概要

Prettierは、コードを解析し最大行長を考慮した独自のルールで再フォーマットする、意見のある（opinionated）コードフォーマッターです。JavaScript、TypeScript、CSS、HTML、Markdown、YAMLなど多数の言語をサポートし、一貫したコードスタイルを強制します。

## 主な機能

| 機能カテゴリ | 説明 |
| --- | --- |
| コードフォーマット | ソースコードを解析し、設定されたルールに基づいて自動的に整形 |
| 複数言語サポート | JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown, YAML等をサポート |
| プラグインシステム | 追加言語やカスタムフォーマッターをプラグインで拡張可能 |
| エディタ統合 | 主要なエディタ（VS Code等）での保存時自動フォーマットをサポート |
| CLI | コマンドラインからのバッチ処理、CI/CD統合に対応 |
| 設定ファイルサポート | .prettierrc、prettier.config.js、package.json等多様な設定形式に対応 |
| EditorConfig統合 | .editorconfigファイルの設定を自動的に読み込み適用 |
| キャッシュ機能 | ファイルキャッシュによる高速な再フォーマット |

## 技術スタック

### コア

- 言語: JavaScript (ES Modules)
- ランタイム: Node.js 20以上
- パッケージマネージャー: Yarn 4.12.0

### 主要ライブラリ

- @babel/parser: JavaScript/TypeScript解析
- typescript: TypeScript言語サポート
- postcss: CSS/SCSS/Less解析
- angular-html-parser: Angular HTML解析
- graphql: GraphQL解析
- mdast-util-from-markdown: Markdown解析
- yaml-unist-parser: YAML解析
- fast-glob: ファイルパターンマッチング
- vnopts: オプション検証
- picocolors: ターミナル出力のカラーリング

## ディレクトリ構成

```
prettier-main/
├── bin/                    # CLI実行ファイル
│   ├── prettier.cjs        # CommonJS形式のエントリーポイント
│   └── prettier.js         # ES Module形式のエントリーポイント
├── src/                    # ソースコード
│   ├── cli/                # CLIの実装
│   ├── common/             # 共通ユーティリティ
│   ├── config/             # 設定ファイル解析
│   ├── document/           # ドキュメントIR（中間表現）
│   ├── language-css/       # CSS/SCSS/Less言語プラグイン
│   ├── language-graphql/   # GraphQL言語プラグイン
│   ├── language-handlebars/# Handlebars言語プラグイン
│   ├── language-html/      # HTML/Vue/Angular言語プラグイン
│   ├── language-js/        # JavaScript/TypeScript言語プラグイン
│   ├── language-json/      # JSON言語プラグイン
│   ├── language-markdown/  # Markdown言語プラグイン
│   ├── language-yaml/      # YAML言語プラグイン
│   ├── main/               # コアロジック
│   ├── plugins/            # ビルトインプラグインエクスポート
│   ├── universal/          # ブラウザ/Node.js共通コード
│   └── utilities/          # ユーティリティ関数
├── packages/               # 追加パッケージ
│   ├── plugin-oxc/         # OXCパーサープラグイン
│   └── plugin-hermes/      # Hermesパーサープラグイン
├── scripts/                # ビルド・リリーススクリプト
├── tests/                  # テストスイート
├── website/                # ドキュメントサイト
├── benchmarks/             # パフォーマンスベンチマーク
└── docs/                   # ドキュメント
```

## セットアップ

### 必要条件

- Node.js 20以上
- Yarn 4.12.0

### インストール手順

```bash
# npmでグローバルインストール
npm install -g prettier

# npmでプロジェクトにインストール
npm install --save-dev prettier

# Yarnでプロジェクトにインストール
yarn add --dev prettier
```

### 設定ファイルの作成

プロジェクトルートに `.prettierrc` を作成：

```json
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 80
}
```

## 開発

### 開発環境のセットアップ

```bash
# リポジトリをクローン
git clone https://github.com/prettier/prettier.git
cd prettier

# 依存関係をインストール
yarn install

# ビルド
yarn build
```

### リンター・フォーマッター

```bash
# ESLintでコードチェック
yarn lint:eslint

# Prettierでコードフォーマットチェック
yarn lint:prettier

# TypeScript型チェック
yarn lint:typecheck

# スペルチェック
yarn lint:spellcheck

# すべてのリントを実行
yarn lint

# 自動修正
yarn fix
```

### テストの実行

```bash
# 全テスト実行
yarn test

# 開発パッケージでテスト
yarn test:dev-package

# 本番ビルドでテスト
yarn test:production

# ブラウザ環境でテスト
yarn test:production:browser
```

### デバッグ

```bash
# デバッグモードで実行
yarn debug <ファイル>

# ウォッチモードでデバッグ
yarn debug:watch <ファイル>

# インスペクターでデバッグ
yarn debug:inspect <ファイル>
```

### パフォーマンス計測

```bash
# ベンチマーク実行
yarn perf:benchmark

# ベンチマーク比較
yarn perf:compare
```
