zed-laravel-blade

Laravel Blade templating language support for Zed.

"file_types": {
  "Blade": ["*.blade.php"]
}

Features

• Syntax highlighting for all Blade directives (conditionals, loops, sections, stacks, inline directives, keywords, attribute directives, Envoy, Livewire)
• Code folding for @if/@foreach/@section/@switch and all block directives
• Outline panel with section names, conditionals, loops, HTML elements
• Language injections: PHP, JavaScript, CSS, Alpine.js, Livewire attributes
• Auto-indentation for Blade blocks and HTML
• Bracket matching and tag auto-close
• Tailwind CSS IntelliSense opt-in
• Prettier support via @shufo/prettier-plugin-blade (currently broken — see zed#42796)

Tailwind CSS IntelliSense

Zed's built-in Tailwind CSS language server is not attached to Blade files by default. Add the following to your Zed settings.json to enable Tailwind class completions in Blade templates:

{
  "languages": {
    "Blade": {
      "language_servers": [
        "tailwindcss-language-server",
        "..."
      ]
    }
  },
  "lsp": {
    "tailwindcss-language-server": {
      "settings": {
        "includeLanguages": {
          "blade": "html"
        }
      }
    }
  }
}

The "..." entry preserves the other language servers configured for Blade.

Formatting

Install blade-formatter globally:

npm install -g blade-formatter

Then add to your Zed settings:

{
  "languages": {
    "Blade": {
      "formatter": {
        "external": {
          "command": "blade-formatter",
          "arguments": ["--stdin"]
        }
      },
      "format_on_save": "on"
    }
  }
}

Optionally, create .bladeformatterrc.json in your project root to configure formatting:

{
  "indentSize": 2,
  "wrapLineLength": 120
}

Note: Config keys must be camelCase (e.g. indentSize), not kebab-case. The CLI flags use --indent-size, but the JSON config file uses indentSize.

Grammar

• tree-sitter-blade

Language Servers

The extension provides these language servers (at least one must be enabled in Zed settings):