LaravelにPrettier、Blade、Tailwind CSSを適用する
LaravelプロジェクトでBladeにPrettierとTailwind CSSを適用したいときがある。 PrettierをNativeScriptやフロントエンドのプロジェクトでESLintと一緒に使ってみたところ、本当に便利だと思ったし、React Nativeでも必須の要素だと思う。 それでは説明すると、 パッ
GGAMI
LaravelプロジェクトでBladeにPrettierとTailwind CSSを適用したいときがある。 PrettierをNativeScriptやフロントエンドのプロジェクトでESLintと一緒に使ってみたところ、本当に便利だと思ったし、React Nativeでも必須の要素だと思う。 それでは説明すると、 パッ
画像のようにPrettierを検索してから、blade.phpを追加する。
**/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,blade.php}
Ctrl + Alt + Shift + Lで簡単にReformatすると、Prettierが自動的に処理してくれる。
変更前
<div>
<div class="font-bold text-2xl">hello world</div>
<div class="font-semibold text-xl text-green-500">tailwindcss v4</div>
</div>変更後
<div>
<div class="text-2xl font-bold">hello world</div>
<div class="text-xl font-semibold text-green-500">tailwindcss v4</div>
</div>このように、*.blade.phpのTailwind CSSクラスが並べ替えられる。
この部分はそれほど重要ではないと思うかもしれないが、デザインや開発をしていると、この順序は作業速度にとても大きく影響する要素だと思う。
今後、PrettierやESLintは、プロジェクトで必ず使うようにしたほうがよさそうだ。
ちなみに、このPrettierの方法はVS Codeでは使えない（笑）。おい ㅡ..ㅡ;;
上記のプラグインをインストールする必要がある。 （単独でインストールするとES moduleエラーが発生するため、適用されているのかどうかよくわからない）
npm install -D @shufo/prettier-plugin-blade{
"plugins": [
"prettier-plugin-blade",
"prettier-plugin-tailwindcss",
"@shufo/prettier-plugin-blade"
],
"overrides": [
{
"files": [
"*.blade.php"
],
"options": {
"parser": "blade"
}
}
],
"printWidth": 120,
"tabWidth": 2,
"useTabs": false,
"sortTailwindcssClasses": true,
"sortHtmlAttributes": "none",
"noPhpSyntaxCheck": false,
"indentInnerHtml": true,
"extraLiners": "",
"trailingCommaPHP": true,
"componentPrefix": "x-,livewire:"
}VS Codeでは上記のフォーマッターをインストールする。
settings.json
// formatter
"[blade]":{
"editor.defaultFormatter": "shufo.vscode-blade-formatter"
},
"bladeFormatter.format.sortTailwindcssClasses": true,
"bladeFormatter.format.wrapLineLength": 120,
"bladeFormatter.format.indentInnerHtml": true,このように設定すればよい。
そうすれば、PhpStormでもVS Codeでも同じPrettierを適用できるようになる。