Prettier設定

17.2.1. .prettierrc 全体例

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf",
  "vueIndentScriptAndStyle": false,
  "singleAttributePerLine": true
}

---

17.2.2. .prettierignore

dist/
node_modules/
*.min.js
coverage/

---

17.2.3. 設定原則

項目	値	理由
semi	false	セミコロン不要
singleQuote	true	文字列にシングルクォートを統一
trailingComma	all	diff最小化
printWidth	100	可読性と画面活用のバランス
endOfLine	lf	クロスプラットフォームの一貫性
singleAttributePerLine	true	Vueテンプレートの可読性向上

---

17.2.4. ESLintとの役割分担

領域	担当ツール
コードフォーマット（インデント、クォート、改行）	Prettier
コード品質（未使用変数、any型、console）	ESLint
Vue SFCルール（ブロック順序、APIスタイル）	ESLint

• Prettierはコードスタイルのみを担当します。
• ESLintはコード品質とVue関連ルールを担当します。
• eslint-config-prettierで両ツール間の競合を防止します。