HTML

HTML support is available through the HTML extension.

This extension is automatically installed.

If you do not want to use the HTML extension, you can add the following to your settings:

{
  "auto_install_extensions": {
    "html": false
  }
}

Formatting

By default Zed uses Prettier for formatting HTML

You can disable format_on_save by adding the following to your Zed settings:

  "languages": {
    "HTML": {
      "format_on_save": "off",
    }
  }

You can still trigger formatting manually with cmd-shift-i|ctrl-shift-i or by opening the command palette (

No default binding
and selecting Format Document.

LSP Formatting

If you prefer you can use vscode-html-language-server instead of Prettier for auto-formatting by adding the following to your Zed settings:

  "languages": {
    "HTML": {
      "formatter": "language_server",
    }
  }

You can customize various formatting options for vscode-html-language-server via Zed settings.json:

  "lsp": {
    "vscode-html-language-server": {
      "settings": {
        "html": {
          "format": {
            // Indent under <html> and <head> (default: false)
            "indentInnerHtml": true,
            // Disable formatting inside <svg> or <script>
            "contentUnformatted": "svg,script",
            // Add an extra newline before <div> and <p>
            "extraLiners": "div,p"
          }
        }
      }
    }
  }

See also: