在 Laravel 中应用 Prettier、Blade 和 Tailwind CSS
有时需要在 Laravel 项目中应用 Blade、Prettier 和 Tailwind CSS。 我曾尝试在 NativeScript 和前端项目中将 Prettier 与 ESLint 一起使用。使用后觉得真的很好，也认为它是 React Native 中不可或缺的要素。 下面来说明一下。 安装软件包 创建 .p
GGAMI
有时需要在 Laravel 项目中应用 Blade、Prettier 和 Tailwind CSS。 我曾尝试在 NativeScript 和前端项目中将 Prettier 与 ESLint 一起使用。使用后觉得真的很好，也认为它是 React Native 中不可或缺的要素。 下面来说明一下。 安装软件包 创建 .p
如图所示，搜索 Prettier 后添加 blade.php。
**/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,astro,blade.php}
只需按 Ctrl + Alt + Shift + L 进行重新格式化，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 配置了。