# 画面設計書 12-Usage-Integrating with Linters

## 概要

本ドキュメントは、Prettierドキュメントサイトの「Usage - Integrating with Linters」画面の設計書です。この画面はPrettierとESLint等のリンターツールを連携させる方法を説明するドキュメントページです。

### 本画面の処理概要

この画面はPrettierとリンターツール（ESLint、Stylelint等）を効果的に組み合わせて使用するためのベストプラクティスを提供する静的ドキュメントページです。フォーマットと品質チェックの役割分担、競合回避の方法を解説しています。

**業務上の目的・背景**：多くの開発プロジェクトではコード品質管理のためにESLint等のリンターツールを使用しています。これらのツールにはスタイルに関するルールも含まれており、Prettierと競合する可能性があります。この画面は、Prettierをフォーマット担当、リンターをコード品質担当として適切に役割分担させる方法を開発者に提供し、ツール間の競合を解消するための設定方法を案内します。

**画面へのアクセス方法**：ユーザーはメインサイトのナビゲーションバーから「Docs」セクションに入り、サイドバーの「Usage」カテゴリ内の「Integrating with Linters」リンクをクリックしてアクセスします。URLは `/docs/integrating-with-linters` です。

**主要な操作・処理内容**：
1. eslint-config-prettierの導入方法の理解
2. Prettier vs Lintersの考え方の理解
3. eslint-plugin-prettierなどの補助ツールの理解
4. prettier-eslintなどの後処理ツールの理解

**画面遷移**：この画面からはComparison画面（`comparison.md`）、および外部のGitHubリポジトリ（eslint-config-prettier等）へのリンクが設定されています。

**権限による表示制御**：なし。全ユーザーが同一のコンテンツを閲覧可能。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 3 | フォーマットチェック（check） | 補助機能 | ESLint等との連携時のフォーマットチェック機能を説明 |
| 18 | フォーマットチェック（--check） | 補助機能 | リンターとの連携時のCLIチェックオプションを説明 |

## 画面種別

ドキュメント / 参照

## URL/ルーティング

- **URL**: `/docs/integrating-with-linters`
- **ソースファイル**: `docs/integrating-with-linters.md`
- **生成方式**: Docusaurus docs機能によるMarkdownからの静的HTML生成

## 入出力項目

本画面は静的ドキュメントページのため、ユーザー入力フィールドはありません。

## 表示項目

| セクション | 表示内容 | 説明 |
|-----------|---------|------|
| 導入説明 | Prettier vs Lintersの基本思想 | フォーマットと品質チェックの役割分担の考え方 |
| eslint-config-prettier | 推奨設定パッケージ | ESLintとの競合を無効化する設定 |
| Notes - プラグイン方式 | eslint-plugin-prettier, stylelint-prettier | リンター内でPrettierを実行する方式（非推奨） |
| Notes - 後処理方式 | prettier-eslint, prettier-stylelint | Prettier実行後にリンターで修正する方式 |

## イベント仕様

### 1-外部リンククリック

ドキュメント内の外部リンクをクリックすると、対応するGitHubリポジトリに遷移します。

- eslint-config-prettier → GitHub: prettier/eslint-config-prettier
- eslint-plugin-prettier → GitHub: prettier/eslint-plugin-prettier
- stylelint-prettier → GitHub: prettier/stylelint-prettier
- prettier-eslint → GitHub: prettier/prettier-eslint

### 2-内部リンククリック

- `comparison.md` → Prettier vs Lintersの詳細説明ページ

## データベース更新仕様

本画面は静的ドキュメントページのため、データベース更新は発生しません。

## メッセージ仕様

本画面は静的ドキュメントページのため、動的メッセージはありません。

## 例外処理

| 状態 | 説明 |
|------|------|
| ページ未発見（404） | URLが誤っている場合、Docusaurus標準の404ページを表示 |
| 外部リンク切れ | 外部リポジトリのURLが変更された場合、ユーザーに404表示 |

## 備考

- 本ドキュメントは短いガイダンスページで、詳細な設定手順は外部リポジトリのREADMEを参照する構成
- プラグイン方式（eslint-plugin-prettier等）は「一般的に非推奨」と明記されている
- `prettier --check .` コマンドの使用が推奨されている

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: ドキュメントコンテンツを理解する

本画面のコンテンツはMarkdownファイルで管理されています。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | integrating-with-linters.md | `docs/integrating-with-linters.md` | リンター連携の基本思想と推奨設定を理解 |

**読解のコツ**: このドキュメントは外部ツールとの連携方法を説明しているため、Prettierコア実装よりも設定・統合方法が中心です。

#### Step 2: 関連するcheck機能の実装を理解する

リンター連携で言及されている`--check`オプションの実装を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | index.js | `src/cli/index.js` | check/listDifferentオプションの処理分岐 |
| 2-2 | format.js | `src/cli/format.js` | フォーマットチェック処理の実装 |

**主要処理フロー**:
1. **49-51行目**: --checkと--list-differentの排他チェック
2. format.js内でcheckモード時のフォーマット差分検出

#### Step 3: Prettier API側のcheck機能を理解する

APIレベルでのcheck機能の実装を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | core.js | `src/main/core.js` | formatWithCursorの実装 |
| 3-2 | index.js | `src/index.js` | check関数のエクスポート |

**主要処理フロー**:
- check関数はformat結果と元コードを比較して差分の有無を返す

### プログラム呼び出し階層図

```
prettier --check .
    │
    ├─ CLI (src/cli/index.js)
    │      └─ formatFiles() with check mode
    │
    └─ Core API
           ├─ format() - コードをフォーマット
           └─ 元コードとの比較 - 差分検出
```

### データフロー図

```
[入力]                     [処理]                      [出力]

ソースコード ────────▶ prettier.format() ────────▶ フォーマット済みコード
     │                        │                           │
     │                        ▼                           │
     └───────────────▶ 差分比較 ◀──────────────────────────┘
                              │
                              ▼
                       差分あり/なし判定
                              │
                              ▼
                       exit code (0 or 1)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| integrating-with-linters.md | `docs/integrating-with-linters.md` | ドキュメント | リンター連携ガイド |
| comparison.md | `docs/comparison.md` | ドキュメント | Prettier vs Linters詳細（関連参照） |
| index.js | `src/cli/index.js` | ソース | CLIエントリーポイント |
| format.js | `src/cli/format.js` | ソース | フォーマット処理実装 |
| core.js | `src/main/core.js` | ソース | コアフォーマット機能 |
| index.js | `src/index.js` | ソース | 公開API定義 |
