# 画面設計書 19-Configuration-Options

## 概要

本ドキュメントは、Prettierドキュメントサイトの「Configuration - Options」画面の設計書です。この画面はPrettierの全フォーマットオプションを詳細に説明するドキュメントページです。

### 本画面の処理概要

この画面はPrettierが提供する全フォーマットオプションの仕様を網羅的に説明する静的ドキュメントページです。printWidth、tabWidth、semi、singleQuote等の各オプションについて、デフォルト値、CLI/API指定方法、動作詳細を解説しています。

**業務上の目的・背景**：Prettierはコードフォーマッターとして様々なスタイル設定をサポートしています。この画面は、開発者やチームがプロジェクトのコーディング規約に合わせてPrettierをカスタマイズするための全オプション仕様を提供します。オプションの設計思想についてはOption Philosophyページで説明されています。

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

**主要な操作・処理内容**：
1. 各オプションのデフォルト値確認
2. CLIオプション（`--print-width`等）の書式確認
3. APIオプション（`printWidth: <int>`等）の書式確認
4. 各オプションの詳細な動作仕様の理解

**画面遷移**：この画面からはOption Philosophy、設定ファイル、エディタ連携、pre-commit、CLI、rationaleドキュメントへのリンクが設定されています。

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

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 40 | セミコロン出力（semi） | 主機能 | semiオプションの詳細説明 |
| 41 | クォートスタイル（singleQuote） | 主機能 | singleQuoteオプションの詳細説明 |
| 42 | 末尾カンマ（trailingComma） | 主機能 | trailingCommaオプションの詳細説明 |
| 43 | アロー関数の括弧（arrowParens） | 主機能 | arrowParensオプションの詳細説明 |
| 44 | オブジェクトのブラケットスペース（bracketSpacing） | 主機能 | bracketSpacingオプションの詳細説明 |
| 45 | JSXクォートスタイル（jsxSingleQuote） | 主機能 | jsxSingleQuoteオプションの詳細説明 |
| 46 | オブジェクトプロパティのクォート（quoteProps） | 主機能 | quotePropsオプションの詳細説明 |
| 47 | 三項演算子スタイル（experimentalTernaries） | 主機能 | experimentalTernariesオプションの詳細説明 |
| 48 | 演算子位置（experimentalOperatorPosition） | 主機能 | experimentalOperatorPositionオプションの詳細説明 |
| 49 | HTML空白処理（htmlWhitespaceSensitivity） | 主機能 | htmlWhitespaceSensitivityオプションの詳細説明 |
| 50 | ブラケット位置（bracketSameLine） | 主機能 | bracketSameLineオプションの詳細説明 |
| 51 | Vueスクリプトインデント（vueIndentScriptAndStyle） | 主機能 | vueIndentScriptAndStyleオプションの詳細説明 |
| 52 | 単一属性ごとの改行（singleAttributePerLine） | 主機能 | singleAttributePerLineオプションの詳細説明 |
| 53 | Prose折り返し（proseWrap） | 主機能 | proseWrapオプションの詳細説明 |
| 54 | 行幅（printWidth） | 主機能 | printWidthオプションの詳細説明 |
| 55 | タブ幅（tabWidth） | 主機能 | tabWidthオプションの詳細説明 |
| 56 | タブ使用（useTabs） | 主機能 | useTabsオプションの詳細説明 |
| 57 | 改行コード（endOfLine） | 主機能 | endOfLineオプションの詳細説明 |
| 58 | 埋め込み言語フォーマット（embeddedLanguageFormatting） | 主機能 | embeddedLanguageFormattingオプションの詳細説明 |
| 59 | Pragma必須（requirePragma） | 主機能 | requirePragmaオプションの詳細説明 |
| 60 | Pragma挿入（insertPragma） | 主機能 | insertPragmaオプションの詳細説明 |
| 61 | Ignore Pragmaチェック（checkIgnorePragma） | 主機能 | checkIgnorePragmaオプションの詳細説明 |

## 画面種別

ドキュメント / 参照

## URL/ルーティング

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

## 入出力項目

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

## 表示項目

| セクション | 表示内容 | 説明 |
|-----------|---------|------|
| Experimental Ternaries | 三項演算子スタイル | experimentalTernariesオプション |
| Experimental Operator Position | 演算子位置 | experimentalOperatorPositionオプション |
| Print Width | 行幅 | printWidthオプション（80推奨） |
| Tab Width | タブ幅 | tabWidthオプション |
| Tabs | タブ使用 | useTabsオプション |
| Semicolons | セミコロン | semiオプション |
| Quotes | クォート | singleQuoteオプション |
| Quote Props | プロパティクォート | quotePropsオプション（as-needed/consistent/preserve） |
| JSX Quotes | JSXクォート | jsxSingleQuoteオプション |
| Trailing Commas | 末尾カンマ | trailingCommaオプション（all/es5/none） |
| Bracket Spacing | ブラケットスペース | bracketSpacingオプション |
| Object Wrap | オブジェクト折り返し | objectWrapオプション（v3.5.0+） |
| Bracket Line | ブラケット位置 | bracketSameLineオプション |
| Arrow Function Parentheses | アロー関数括弧 | arrowParensオプション（always/avoid） |
| Range | 範囲 | rangeStart/rangeEndオプション |
| Parser | パーサー | parserオプション（babel, typescript等） |
| File Path | ファイルパス | filepathオプション |
| Require Pragma | Pragma必須 | requirePragmaオプション |
| Insert Pragma | Pragma挿入 | insertPragmaオプション |
| Check Ignore Pragma | Ignore Pragmaチェック | checkIgnorePragmaオプション（v3.6.0+） |
| Prose Wrap | Prose折り返し | proseWrapオプション（always/never/preserve） |
| HTML Whitespace Sensitivity | HTML空白処理 | htmlWhitespaceSensitivityオプション |
| Vue files script and style tags indentation | Vueインデント | vueIndentScriptAndStyleオプション |
| End of Line | 改行コード | endOfLineオプション（lf/crlf/cr/auto） |
| Embedded Language Formatting | 埋め込み言語 | embeddedLanguageFormattingオプション |
| Single Attribute Per Line | 単一属性改行 | singleAttributePerLineオプション（v2.6.0+） |

## イベント仕様

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

- `option-philosophy.md` → オプション設計思想
- `configuration.md` → 設定ファイルドキュメント
- `editors.md` → エディタ連携ドキュメント
- `precommit.md` → pre-commitドキュメント
- `cli.md` → CLIドキュメント
- `rationale.md` → 設計根拠ドキュメント
- `plugins.md` → プラグインドキュメント

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

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

## メッセージ仕様

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

## 例外処理

| 状態 | 説明 |
|------|------|
| ページ未発見（404） | URLが誤っている場合、Docusaurus標準の404ページを表示 |

## 備考

- printWidthは80文字推奨、ESLintのmax-lenとは異なる概念
- trailingCommaのデフォルトがv3.0.0で`es5`から`all`に変更
- arrowParensのデフォルトがv2.0.0で`avoid`から`always`に変更
- endOfLineのデフォルトがv2.0.0で`auto`から`lf`に変更
- jsxBracketSameLineはv2.4.0でdeprecated、bracketSameLineを使用
- .editorconfig対応オプション: end_of_line, indent_style, indent_size/tab_width, max_line_length

---

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

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

### 推奨読解順序

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | options.md | `docs/options.md` | 全オプションの仕様を理解 |

**読解のコツ**: 各オプションはセクション（`##`）で分割されており、Default/CLI Override/API Overrideの表形式で仕様が記載されています。

#### Step 2: コアオプション定義を理解する

Prettierのコアオプション定義を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | core-options.evaluate.js | `src/main/core-options.evaluate.js` | コアオプションの定義 |
| 2-2 | normalize-options.js | `src/main/normalize-options.js` | オプション正規化処理 |

**主要処理フロー**:
1. オプション定義（name, type, default, description等）
2. オプションの検証と正規化

#### Step 3: オプションカテゴリを理解する

オプションのカテゴリ分類を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | option-categories.js | `src/main/option-categories.js` | オプションカテゴリ定義 |

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

```
Options Processing
    │
    ├─ core-options.evaluate.js
    │      └─ コアオプション定義
    │             ├─ printWidth
    │             ├─ tabWidth
    │             ├─ useTabs
    │             ├─ semi
    │             ├─ singleQuote
    │             └─ ... (その他のオプション)
    │
    ├─ normalize-options.js
    │      └─ normalizeOptions()
    │             ├─ オプション検証
    │             └─ デフォルト値適用
    │
    └─ resolve-config.js
           └─ 設定ファイルからのオプション読み込み
                  └─ オプションマージ
```

### データフロー図

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

設定ファイル ─────────▶ resolveConfig() ─────────▶ オプションオブジェクト
(.prettierrc等)               │
                              ▼
CLIオプション ─────────▶ parseArguments() ─────────▶ オプションマージ
(--semi等)                    │
                              ▼
APIオプション ─────────▶ normalizeOptions() ────────▶ 検証済みオプション
(semi: false等)                                            │
                                                           ▼
                                                     format()実行
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| options.md | `docs/options.md` | ドキュメント | オプションガイド |
| core-options.evaluate.js | `src/main/core-options.evaluate.js` | ソース | コアオプション定義 |
| normalize-options.js | `src/main/normalize-options.js` | ソース | オプション正規化 |
| option-categories.js | `src/main/option-categories.js` | ソース | カテゴリ定義 |
| resolve-config.js | `src/config/resolve-config.js` | ソース | 設定解決 |
| option-philosophy.md | `docs/option-philosophy.md` | ドキュメント | オプション設計思想（関連参照） |
| configuration.md | `docs/configuration.md` | ドキュメント | 設定ファイルドキュメント（関連参照） |
| rationale.md | `docs/rationale.md` | ドキュメント | 設計根拠ドキュメント（関連参照） |
