# 画面設計書 22-Editors - Editor Integration

## 概要

本ドキュメントは、Prettier公式サイトの「Editor Integration」ドキュメントページの画面設計書である。このページは、各種コードエディタ・IDEでPrettierを利用するための統合方法を一覧形式で解説するドキュメントページとして機能する。

### 本画面の処理概要

この画面では、Visual Studio Code、Emacs、Vim、Helix、Sublime Text、JetBrains IDE、Visual Studio、Espressoなど、主要なコードエディタでPrettierを使用するための設定方法や推奨プラグインを紹介している。

**業務上の目的・背景**：開発者がPrettierを効果的に活用するには、使用しているエディタと統合することが重要である。エディタ統合により、コード保存時の自動フォーマットや、手動でのフォーマット実行が可能になり、開発ワークフローが大幅に改善される。この画面は、各エディタごとの推奨プラグインや設定方法を一箇所にまとめることで、開発者が迅速に環境構築できるようにする。

**画面へのアクセス方法**：ホームページのナビゲーションバーから「Docs」をクリックし、サイドバーの「Editors」セクション内の「Editor Integration」リンクをクリックしてアクセスする。URLは `/docs/editors` である。

**主要な操作・処理内容**：
1. 対応エディタ一覧の閲覧
2. 各エディタのプラグイン情報・GitHubリポジトリリンクの確認
3. 詳細設定ガイドページ（Vim、WebStorm）への遷移
4. ファイル監視方法（Watching Files）ページへの遷移

**画面遷移**：
- 遷移元：ホームページ、他のドキュメントページ
- 遷移先：Vim Setup（/docs/vim）、WebStorm Setup（/docs/webstorm）、Watching Files（/docs/watching-files）、Install（/docs/install）、各エディタプラグインのGitHubリポジトリ（外部リンク）

**権限による表示制御**：なし（公開ドキュメントページ）

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 2 | カーソル位置追跡フォーマット（formatWithCursor） | 主機能 | エディタ統合時のカーソル追跡フォーマットを説明 |
| 13 | 設定ファイル解決（resolveConfig） | 補助機能 | エディタでの設定ファイル解決を説明 |
| 16 | 設定キャッシュクリア（clearConfigCache） | 補助機能 | エディタでの設定キャッシュクリアを説明 |

## 画面種別

ドキュメント表示（静的コンテンツ） - 一覧形式

## URL/ルーティング

- URL: `/docs/editors`
- ルーティング: Docusaurus docs機能による自動生成

## 入出力項目

本画面は静的なドキュメント表示ページのため、ユーザー入力項目はない。

| 項目名 | 入出力 | 型 | 説明 |
|--------|--------|-----|------|
| - | - | - | 該当なし |

## 表示項目

| 項目名 | 説明 | 備考 |
|--------|------|------|
| ページタイトル | "Editor Integration" | H1見出し |
| 導入テキスト | エディタからPrettierを実行する推奨 | |
| ファイル監視リンク | エディタが対応していない場合の代替 | watching-files.mdへのリンク |
| ローカルインストール注意 | プロジェクトローカルのPrettierを使用する重要性 | install.mdへのリンク |
| Visual Studio Code | prettier-vscode拡張の案内 | GitHubリンク付き |
| Emacs | prettier-emacs、prettier.el、Apheleiaの案内 | GitHubリンク付き |
| Vim | vim-prettier、Neoformat、ALE、coc-prettierの案内 | vim.mdへの詳細リンク付き |
| Helix | Helix言語設定でのフォーマッター指定方法 | wiki外部リンク付き |
| Sublime Text | JsPrettierプラグインの案内 | Package Control外部リンク付き |
| JetBrains WebStorm等 | WebStorm設定ガイドへのリンク | webstorm.mdへのリンク |
| Visual Studio | JavaScript Prettier拡張の案内 | GitHubリンク付き |
| Espresso | espresso-prettierプラグインの案内 | GitHubリンク付き |

## イベント仕様

### 1-ページ読み込み

Docusaurusによる静的サイトジェネレーションにより、ビルド時にMarkdownファイルからHTMLページが生成される。ユーザーがページにアクセスすると、生成済みのHTMLコンテンツが表示される。

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

サイドバーまたは本文内のリンクをクリックすると、該当するドキュメントページに遷移する（Vim、WebStorm、Watching Files、Install）。

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

各エディタプラグインのGitHubリポジトリリンクをクリックすると、新しいタブで外部サイトが開く。

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

### 操作別データベース影響一覧

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| - | - | - | 静的サイトのため該当なし |

## メッセージ仕様

| メッセージID | 種別 | 表示条件 | メッセージ内容 |
|-------------|------|---------|---------------|
| - | - | - | 静的ドキュメントページのため該当なし |

## 例外処理

| 例外 | 処理内容 |
|------|---------|
| 404 Not Found | ドキュメントが存在しない場合、Docusaurusの404ページを表示 |
| 外部リンク切れ | 外部リンクのリンク先が存在しない場合、外部サイトの404ページを表示 |

## 備考

- 本ページはDocusaurusのdocs機能を使用して生成される
- Markdownファイルのフロントマターで`id: editors`と`title: Editor Integration`を定義
- 各エディタのセクションはH2見出しで区切られている
- 外部リンク（GitHub、Package Control、Helix wiki等）は新しいタブで開く

---

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

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

### 推奨読解順序

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

まず、実際のMarkdownドキュメントの内容と構造を把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | editors.md | `docs/editors.md` | 各エディタの紹介内容、外部リンク、内部リンクの構成 |

**読解のコツ**: 各エディタのセクションはH2見出しで構成されている。内部リンク（Vim、WebStorm、Watching Files、Install）と外部リンク（GitHub等）の使い分けに注目。

#### Step 2: サイドバー構成を理解する

ドキュメントのナビゲーション構造を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | sidebars.json | `website/sidebars.json` | "Editors"カテゴリ内での位置づけ、関連ドキュメントの構成 |

**主要処理フロー**:
1. **行26**: "Editors"カテゴリに["editors", "webstorm", "vim", "watching-files"]が含まれている

#### Step 3: 関連ドキュメントを理解する

Editor Integrationから参照される関連ドキュメントを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | vim.md | `docs/vim.md` | Vim詳細設定ガイドの内容 |
| 3-2 | webstorm.md | `docs/webstorm.md` | WebStorm設定ガイドの内容 |
| 3-3 | watching-files.md | `docs/watching-files.md` | ファイル監視方法の内容 |

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

```
Docusaurus Build Process
    |
    +-- docs/editors.md (Source)
    |      |
    |      +-- Internal Links
    |      |      +-- watching-files.md
    |      |      +-- install.md
    |      |      +-- vim.md
    |      |      +-- webstorm.md
    |      |
    |      +-- External Links
    |             +-- GitHub Repositories
    |             +-- Package Control
    |             +-- Helix Wiki
    |
    +-- website/sidebars.json (Navigation)
           |
           +-- "Editors" Category
                  +-- editors (this page)
                  +-- webstorm
                  +-- vim
                  +-- watching-files
```

### データフロー図

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

Markdown File     ------> Docusaurus MDX Compiler -----> HTML Page
(docs/editors.md)         (Link Resolution)              (/docs/editors)
       |
       +-- Frontmatter (id, title)
       +-- Content (Markdown)
       +-- Internal/External Links
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| editors.md | `docs/editors.md` | ソース | ドキュメントコンテンツ（Markdown） |
| vim.md | `docs/vim.md` | ソース | Vim詳細設定ガイド（リンク先） |
| webstorm.md | `docs/webstorm.md` | ソース | WebStorm設定ガイド（リンク先） |
| watching-files.md | `docs/watching-files.md` | ソース | ファイル監視方法（リンク先） |
| install.md | `docs/install.md` | ソース | インストール方法（リンク先） |
| sidebars.json | `website/sidebars.json` | 設定 | サイドバーナビゲーション構成 |
| docusaurus.config.js | `website/docusaurus.config.js` | 設定 | Docusaurusサイト全体の設定 |
