【Laravel Blade × TailwindCSS × VScode】保存時のフォーマットを有効化しclassの順序を揃える

はじめに

LaravelのBladeテンプレートにTailwindCSSを導入する機会があり、フォーマッターを導入しようとしたところ少し設定が必要だったので、備忘録として記事にしました！
フォーマッターはPrettierを使用し、TailwindCSS導入済みを前提に進めます。

使用したもの

・Laravel 11 Bladeテンプレート
・TailwindCSS
・Prettier
・Node.js
・VScode

Prettier導入でできること

・classの順序を揃えてくれる！見やすい！楽！最高！
　→存在しないclassを指摘してはくれないけど、先頭に持ってきてくれるのでミスを見つけやすい！
・classが重複していた場合、解消してくれる！さすが！

なぜ追加の設定が必要なのか

PrettierのTailwindCSSフォーマットは、デフォルトではBladeテンプレートに対応していないため。

ざっくり設定方法まとめ

1. VScodeの拡張機能「Prettier」をインストール
2. Nodeで「Tailwind用Prettier」「Blade用Prettier」プラグインをインストール
3. Prettierの設定ファイルを作成
4. VScodeのフォーマット設定を変更する

VScodeの拡張機能「Prettier」をインストール

題名そのまま、「Prettier-Code formatter」をインストールします。
Prettierと検索すると色々出てきますが、公式をインストールしてください！

Nodeで「Tailwind用Prettier」「Blade用Prettier」プラグインをインストール

node_modulesに以下のプラグインを追加します。バージョンは導入時のものです。
・prettier-plugin-tailwindcss（0.6.8）
・prettier-plugin-blade（2.1.19）

npm install -D prettier-plugin-tailwindcss
npm install -D prettier-plugin-blade
# devに保存

Prettierの設定ファイルを作成する

Prettierの設定ファイル「.prettierrc」をLaravelプロジェクト直下に作成します。
このファイルに、使用するプラグインとBladeファイルをフォーマットの対象にする旨を記載します。

.prettierrc

{
    "tailwindConfig": "tailwind.config.js",
    "plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-blade"],
    "overrides": [
        {
            "files": ["*.blade.php"],
            "options": {
                "parser": "blade"
            }
        }
    ]
}

特定のファイルやディレクトリをフォーマットの対象から外す設定も可能です！
「.prettierignore」ファイルをLaravelプロジェクト直下に作成し、その中に無視したいファイルやディレクトリを書くだけでOK！

例

**/.git
**/node_modules
package.json
package-lock.json

VScodeのフォーマット設定を変更する

VScodeのフォーマット設定をPrettier仕様に変更します。
VScodeの設定から手動で変更もできますが、おすすめはVScodeの設定ファイルを作成し設定する方法です！
複数人での開発やPCが変わったときも自動で設定してくれるので楽！
今回は、設定ファイルを作成する方法で進めます。

◆VScodeの設定用のディレクトリ「.vscode」と設定ファイル「setting.json」を作成

　<プロジェクトルート>/.vscode/settings.json
　※ディレクトリの場所は上記でないとだめなので注意！

VScodeの設定は「ユーザー」と「ワークスペース」の2種類あり、上記の「.vscode」ディレクトリは「ワークスペース」の設定を保存する場所です。
設定の優先度は「ワークスペース」の方が高いです。

◆「setting.json」の中身

setting.json

{
    "prettier.confgPath": "./php/.prettierrc",
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "prettier.prettierPath": ".php/node_modules/prettier",
    "prettier.ignorePath": "./php/.prettierignore",
    "prettier.documentSelectors": [
        "**/*.blade.php"
    ],
    "[blade]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

◎設定内容(コードの上から順に)
・Prettier設定ファイルのパス指定
・VScodeのエディタデフォルトフォーマッターに「拡張機能のPrettier」を設定
・保存と同時にフォーマットする設定を有効化
・「プラグインのPrettier」ディレクトリのパス指定
　※インストールした２つのプラグインはこのディレクトリに入っています
・フォーマット対象外設定のファイルパス指定(作成してなければ、なしでOK)
・BladeファイルをPrettierフォーマットの対象に設定
・Bladeファイルの設定。BladeファイルのデフォルトフォーマッターをPrettierに設定

Bladeファイルの設定で、デフォルトフォーマッターをPrettierに設定しないとフォーマットが効かないので注意！！！

以上で設定は完了です！！！！

VScodeを再起動

VScodeを再起動して、Bladeファイルがフォーマットされるか確認します！
お疲れ様でした～～～！！

ちなみに下記のコマンドで、プロジェクト内のPrettierフォーマット対象ファイルを一気にフォーマットできます。

npx prettier . --write