VScodeのLaravelで「コード整形」のショートカットキー作成

目標

Bladeファイル（.blade.php）を ⌥ + ⌘ + L のショートカットで綺麗に整形できるようにする

① Blade Formatter 拡張機能をインストール

インストール手順

①VSCode左メニューの「拡張機能」アイコンをクリック（または ⌘ + Shift + X）
↓
②検索バーに「Blade Formatter」と入力
↓
③「Laravel Blade formatter by Shufo」をインストール

②VSCodeの設定ファイル（settings.json）に以下を追加

"[blade]": {
  "editor.defaultFormatter": "shufo.vscode-blade-formatter", // Bladeファイル用の整形ツールを指定
  "editor.formatOnSave": true // 保存時に自動整形（任意）
}

補足

・「command + Shift + P」→「settings json」と入力して
「Preferences: Open Settings (JSON)」を選べば編集できる。
・「"editor.formatOnSave": true」を使うと、保存時に自動で整形されるので便利

③Blade整形用のショートカットキーを設定する

手順

①「command + K」→「command + S」でショートカット設定画面を開く
　⇨コマンドはどのファイルからでもOK
↓
②上部検索バーに「Blade: Format Document」と入力

↓
③出てきたコマンドに「鉛筆アイコン」クリック → 任意のキー割り当てを追加
　⇨好きなキーを設定（例：⌥ + ⌘ + L）

キー	用途
option + command + L	LaravelのL、整形（Format）のFと被らずおすすめ

④ 整形が反映されない・変な挙動が出るときの対処法

問題	解決法
Shift + Option + F で Ï が出る	macOS日本語キーボードの仕様。別のキーに割り当てる（例：option + command + L）
整形されない	settings.json に [blade] の設定が入っているか確認
他のフォーマッタと競合	他にインストールされている整形系拡張（Prettierなど）を一時的に無効にして確認

動作確認

任意の「.blade.php」ファイルを開き、設定したショートカット（例：option + command + L）を押す。
💡 正常なら、インデントや改行が整い、コードが読みやすくなる！

まとめ

やること	内容
拡張機能	Blade Formatter（Shufo氏作）
settings.json	[blade]に整形設定
キーバインド	option + command + L を割り当てる
トラブル対処	他拡張との競合、日本語キーボードの特殊キー