Prettier実行ガイド

プロジェクトでPrettierによりフロントエンドコード（JS/TS/CSS/JSON/MD）を自動フォーマットする方法です。設定は .prettierrc で行います。コミット前の lint-staged でもステージされたファイルに自動実行されます。

---

環境セットアップ

• 前提: Node.js 22.22.1 以上（22 系 LTS）、npm または yarn
• インストール: プロジェクトルートで npm install を実行

コマンド一覧は コマンド一覧 を参照してください。対象拡張子: .js, .jsx, .ts, .tsx, .css, .scss, .json, .md

---

設定の概要

.prettierrcに設定を指定できます。

オプション	値	説明
printWidth	120	1行の最大文字数。超えたら折り返し
tabWidth	4	インデント1段の幅（スペース数、または useTabs 時はタブ1文字）
useTabs	true	インデントにタブを使用（false の場合はスペース）
semi	true	文末にセミコロンを付与
singleQuote	true	文字列をシングルクォートで統一（ダブルクォートは使わない）
quoteProps	"as-needed"	オブジェクトのキーは必要なときだけクォート（例: ハイフン含む場合）
trailingComma	"es5"	末尾カンマを ES5 で有効な箇所に付与（オブジェクト・配列など）
bracketSpacing	true	オブジェクトの { } 内側にスペースを入れる（{ a: 1 }）
bracketSameLine	false	HTML の > を閉じタグと同じ行にしない（改行する）
arrowParens	"always"	アロー関数の引数が1つでも常に括弧で囲む (x) =>
proseWrap	"preserve"	Markdown の改行をそのまま維持
htmlWhitespaceSensitivity	"css"	HTML の空白を CSS の display に合わせて扱う
endOfLine	"lf"	改行コードを LF に統一
embeddedLanguageFormatting	"auto"	埋め込み言語（HTML 内の JS 等）を自動でフォーマット

overrides: *.md および *.yml / *.yaml では useTabs false・tabWidth 2 を適用（Markdown/YAML はスペース2つでインデント）。

除外したいファイルは .prettierignore で指定できます。

Twig（公開サイトテンプレート）

core_src/View/**/*.twig は 専用の Prettier 設定で整形します（標準の npm run format の対象外）。Twig 用プラグイン @zackad/prettier-plugin-twig は、HTML の開始タグ内に {% if %} などを挟む書き方や可変のタグ名（例: <>）をパースできないため、そのようなファイルは .prettierignore-twig に列挙してスキップしています。

コマンド	内容
npm run format:twig	core_src/View/**/*.twig を整形（上記除外を除く）
npm run format:twig:check	未整形がないか検査（CI や PR 前の任意チェックに利用可）

設定ファイル: prettier-twig.config.json。管理画面やブロックエディタ配下の .twig は現状このコマンドの対象外です（パーサ制約が多いため）。

---

結果の見方

• format: 変更したファイルのパスが表示される
• format:check: 問題なしなら All matched files use Prettier code style!。未整形があれば対象ファイル一覧と Forgot to run Prettier? と表示される

---

エディタ統合（任意）

保存時に自動フォーマットしたい場合は、VS Code なら「Prettier - Code formatter」を入れ、editor.formatOnSave: true を設定。他のエディタは Prettier 公式 を参照。

---

トラブルシューティング

症状・原因	対処
command not found	Node/npm をインストールし node --version / npm --version で確認
実行してもファイルが変わらない	対象拡張子か確認。.prettierignore で除外されていないか確認
設定が効かない	.prettierrc の記述を確認。エディタの Prettier 拡張を再起動
コミット時に Prettier でエラー	フォーマット実行後、git add . のあと再度コミット（コマンドは コマンド一覧 参照）

---

関連ドキュメント

• 品質管理ツール全体の概要
• PHPCS実行ガイド
• コミット前の自動フォーマット（Husky + lint-staged）はプロジェクトルートの README を参照

---

最終更新: 2026-04-18