VS Code Laravel Blade Prettier 安裝

說明

分享 Laravel 使用 Prettier 格式化 Blade 文件。

安裝

Prettier plugin

npm install --save-dev @shufo/prettier-plugin-blade prettier

Laravel Blade Snippets

• https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade

讓 Visual Studio Code 可以分辨 Blade 檔案。

Prettier

• https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

配置

Prettier

.prettierrc

{
  "overrides": [
    {
      "files": [
        "*.blade.php"
      ],
      "options": {
        "extraLiners": "",
        "indentInnerHtml": true,
        "parser": "blade",
        "sortTailwindcssClasses": true,
        "tabWidth": 2
      }
    }
  ],
  "plugins": [
    "@shufo/prettier-plugin-blade",
    "prettier-plugin-tailwindcss"
  ]
}

Visual Studio Code

setting.json

{
  "[blade]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

參考

• prettier-plugin-blade