zed/docs/src/languages/html.md
Danilo Leal 45f9edcbb9
docs: Add small refinements to CSS adjacent pages (#31683)
Follow up to https://github.com/zed-industries/zed/pull/31681. Was
visiting some of these pages and noticed these somewhat small formatting
and copywriting improvement opportunities. The docs for Svelte in
particular felt somewhat unorganized.

Release Notes:

- N/A
2025-05-29 08:43:54 -03:00

1.9 KiB

HTML

HTML support is available through the HTML extension.

This extension is automatically installed, but if you do not want to use it, 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.json:

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

You can still trigger formatting manually with {#kb editor::Format} or by opening the Command Palette ({#kb command_palette::Toggle}) and selecting "Format Document".

LSP Formatting

To use the vscode-html-language-server language server auto-formatting instead of Prettier, add the following to your Zed settings:

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

You can customize various formatting options for vscode-html-language-server via your 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