首页
/ Zed 编辑器 HTML 语言支持配置指南：语言服务器、格式化与 Tailwind 补全集成

Zed 编辑器 HTML 语言支持配置指南：语言服务器、格式化与 Tailwind 补全集成

2026-09-06 18:48:39作者：郦嵘贵Just
zed
Code at the speed of thought – Zed is a high-performance, multiplayer code editor from the creators of Atom and Tree-sitter.
项目地址：https://gitcode.com/GitHub_Trending/ze/zed

Zed 通过官方 HTML 扩展提供对 .html / .htm / .shtml 文件的完整语言支持，涵盖基于 Tree-sitter 的语法高亮与结构分析、基于 vscode-html-language-server 的智能补全/校验/格式化，以及可选接入 Prettier 与 Tailwind CSS 语言服务器的能力。本指南围绕该扩展在 Zed 中的配置方式展开，读完你将掌握：如何开关自动安装扩展、如何切换 Prettier 与 LSP 两种 HTML 格式化管线并细化其行为、如何让 Tailwind 类名补全在 HTML 属性中生效。

HTML 扩展的安装与语言支持架构

Zed 对 HTML 的语言支持由内置扩展仓库中的 HTML 扩展 提供，其能力由三层组成：

  1. 语法解析层：使用 Tree-sitter grammar（tree-sitter/tree-sitter-html），在 extension.toml 中通过 commit 锁定具体版本；
  2. 语言服务器层：接入微软 vscode-html-language-server（基于 vscode-html-languageservice 实现补全、诊断、跳转、格式化等 LSP 能力），见 extension.toml；
  3. 语言配置层：在 config.toml 中声明文件关联、注释语法、括号自动闭合与 Prettier 解析器映射。

该扩展默认随 Zed 自动安装，这一点在 Zed 默认设置中直接体现：assets/settings/default.json 的 auto_install_extensions 字段将 "html" 置为 true。

若你希望使用自己维护的 HTML 扩展（例如本地安装的社区替代版本），可以在 settings.json 中显式禁用自动安装：

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

文件关联与编辑体验的语言级定义

config.toml 定义了 HTML 作为 Zed 语言时的默认行为：

  • path_suffixes = ["html", "htm", "shtml"]：三种文件后缀自动以 HTML 语言打开；
  • block_comment：以 <!-- ... --> 作为块注释，注释/取消注释（editor::ToggleComments）即使用它；
  • brackets 与 autoclose_before = ">})"：声明式编辑体验，输入 {、(、<、" 等会自动补全配对的闭合符号，输入 > 前会自动闭合；
  • prettier_parser_name = "html"：把该语言显式映射到 Prettier 的 html 解析器，这正是「默认用 Prettier 格式化 HTML」的底层依据。

语言服务器的自动获取机制

extensions/html/src/html.rs 揭示了语言服务器的真实拉起过程：Zed 不内置该服务器，而是优先使用环境变量 PATH 中已有的 vscode-html-language-server 可执行文件；若不存在，则通过 npm 安装 @zed-industries/vscode-langservers-extracted 包，并用内置 Node 以 --stdio 模式启动其中的服务器脚本（html.rs）。因此首次打开 HTML 文件时出现「下载语言服务器」的进度提示是正常现象。

值得注意的实现细节是：该扩展在初始化选项中主动声明了 {"provideFormatter": true}（html.rs），表示语言服务器本身具备格式化能力——这正是下文「LSP Formatting」配置选项存在的技术前提。而你在 settings.json 里写的 lsp.vscode-html-language-server.settings 会通过 language_server_workspace_configuration 原样转发给服务器进程（html.rs）。

格式化：Prettier 与 LSP 两套管线的选择

默认行为：Prettier 格式化

Zed 默认使用 Prettier 作为 HTML 的格式化工具，这是由 config.toml 中 prettier_parser_name = "html" 与全局默认 "formatter": "auto"（见 assets/settings/default.json）共同决定的。若你的项目根目录存在 Prettier 配置（.prettierrc、prettier.config.js 等）及依赖，Zed 会自动采用项目内版本。

关闭自动保存格式化

Zed 中 format_on_save 的默认值为 "off"（见 assets/settings/default.json）。若希望 HTML 文件保存时完全不做自动格式化，可在 Settings（zed::OpenSettings）中的 Languages > HTML 下配置，或直接写入 settings 文件：

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

关闭自动格式化后，你依然可以随时手动触发：执行 editor::Format 动作，或打开 command palette（command_palette::Toggle，详见 getting-started 一节）后选择 Format Document。

切换为 LSP 格式化

Zed 中 formatter 的可选值包括 "auto"、"language_server" 以及指定外部工具/代码操作的写法（见 assets/settings/default.json 注释）。由于 vscode-html-language-server 通过 provideFormatter 声明了格式化能力，你可以把 HTML 的格式化器显式切换为语言服务器：

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

这样一来，格式化的执行主体从 Prettier 变为语言服务器内置的 HTML 格式化器，二者对标签属性换行、内联内容缩进等细节的处理规则不同，可按团队规范取舍。

LSP 格式化选项详解

vscode-html-language-server 的格式化行为可通过 Zed 的 lsp 配置块逐项定制。以下是最常用的三个选项及其含义：

配置项 作用 默认值
format.indentInnerHtml 是否在 <html>、<head> 内部进行缩进 false
format.contentUnformatted 逗号分隔的标签列表，这些标签内部的内容不做格式化 pre,code,textarea
format.extraLiners 逗号分隔的标签列表，在这些标签之前额外插入一个空行 head,body,/html

将配置写入 settings 文件（写入后可在 Settings > LSP > vscode-html-language-server 下看到同样结构）：

"lsp": {
  "vscode-html-language-server": {
    "settings": {
      "html": {
        "format": {
          // 在 <html> 和 <head> 内部缩进（默认: false）
          "indentInnerHtml": true,
          // 禁止在 <svg> 或 <script> 内部进行格式化
          "contentUnformatted": "svg,script",
          // 在 <div> 和 <p> 之前额外加一个空行
          "extraLiners": "div,p"
        }
      }
    }
  }
}

按上面示例配置后：HTML 顶层结构会被缩进得更清晰、<svg> 与 <script> 内手写的代码不会被重排，而连续的块级标签之间会自动出现分隔空行。settings 会被 html.rs 中实现的 language_server_workspace_configuration 原样下发，因此无需重启 Zed，改动随下一次格式化即时生效。

让 Tailwind CSS 语言服务器在 HTML 中提供类名补全

Tailwind CSS 的官方语言服务器默认需要知道「在哪些位置寻找类名」才能给出补全与错误提示。若你在 HTML 文件中已经能看到来自 tailwindcss-language-server 的补全但局限于模板内联样式以外的场景，可以通过 classRegex 把 HTML class 属性声明为类名扫描区域。

在 settings.json 中加入以下配置：

{
  "lsp": {
    "tailwindcss-language-server": {
      "settings": {
        "experimental": {
          "classRegex": ["class=\"([^\"]*)\""]
        }
      }
    }
  }
}

其中正则 class=\"([^\"]*)\" 的含义是：匹配 class="..."，并捕获双引号内被引号包裹的内容作为候选类名集合。配置生效后，在 HTML 的 class 属性中即可获得 Tailwind 工具类的实时补全，例如：

<div class="flex items-center <补全候选出现于此>">
  <p class="text-lg font-bold <补全候选出现于此>">Hello World</p>
</div>

结合 contentUnformatted、缩进类规则与本项 classRegex，你可以在 Zed 中获得「HTML 结构格式化 + 模板中 Tailwind 智能提示」兼顾的开发体验。若项目中同时维护 JSX/TSX 与 HTML 模板，可在 classRegex 数组中追加针对框架语法的正则，使同一语言服务器覆盖多种文件形态。

相关语言参考

HTML 扩展往往与前端工具链中的其他语言协同工作，Zed 对应的语言支持文档如下，可对照配置：

核心配置与本指南相关的仓库文件一览：HTML 扩展元数据与语言服务器声明、HTML 语言行为配置、语言服务器启动与配置转发实现。

zed
Code at the speed of thought – Zed is a high-performance, multiplayer code editor from the creators of Atom and Tree-sitter.
项目地址：https://gitcode.com/GitHub_Trending/ze/zed
登录后查看全文

相关内容推荐

1 Zed 中配置 Tailwind CSS 语言支持：补全、Lint、悬停预览与格式化完整指南2 Zed 中 Astro 语言支持与 Tailwind CSS 智能提示的配置实战3 Zed 中 Ruby 与 ERB 语言支持完全配置指南：语言服务器、任务与调试4 在 Zed 中配置 Svelte 语言支持：语言服务器、Inlay Hints 与 Tailwind CSS 实战指南5 在 Zed 中为 Gleam 配置 Tailwind CSS 语言服务器：settings.json 配置全解与实现原理6 Zed 编辑器 PHP 开发环境配置完全指南：语言服务器、PHPDoc 高亮与 Xdebug 调试7 Zed 中 JavaScript 语言支持完全指南：语言服务器、格式化、ESLint 与调试配置8 Zed 中的 Go 语言支持：gopls 配置、Inlay Hints、Code Lens 与 Delve 调试实战9 在 Zed 中配置 Deno 语言支持：语言服务器切换、格式化、配置补全与调试实操指南10 在 Zed 中配置 Standard ML 开发环境：Millet 语言服务器与 MLB/CM 工程文件的完整指南
热门项目推荐
相关项目推荐

热门内容推荐

1 编程实践项目探索指南：从零构建技术能力体系2 技术解构式学习：从0到1构建你的编程知识体系3 构建自己的技术世界：build-your-own-x项目的实践探索指南4 解锁编程技能的实践之旅：从零构建你的技术世界5 技术实践探索：从零开始构建核心系统的实践指南6 亲手锻造技术引擎：从0到1构建核心系统的实践指南

最新内容推荐

LocalAI audio-cpp 后端实战：用 audio.cpp GGML 引擎一站式驱动 TTS、ASR、VAD、分离与音色转换Angular cli-hello-world-lazy 集成测试：如何验证懒加载分包与 ngDevMode 的构建期移除深入理解 @expo/cli：Expo 版本化命令行工具的设计、构建与测试实践Rust 编译器错误码 E0565 详解：内置属性中误用字面量时的诊断机制与修复方法rclone Swift 后端完整实践：OpenStack 对象存储的配置、认证、大对象分块与分页调优OpenClaw iOS App Completeness 评分细则：claw-score 技能的类别范围、记分带与证据校验FastAPI WebSockets 实战：安装、路由、依赖注入与多客户端断开处理Slidev Code Groups 详解:基于 Comark 语法的标签式代码分组与图标自动匹配Twenty 文档站实战指南：基于 Mintlify 的多语言文档体系构建与导航生成机制Starship No Nerd Fonts 预设：无需安装 Nerd Font 即可完整显示终端提示符图标

项目优选

收起
kernelkernel
deepin linux kernel
C
33
18
pytorchpytorch
作为 Ascend for PyTorch 社区的核心组件，TorchNPU 是昇腾专为 PyTorch 打造的深度学习适配插件，使 PyTorch 框架能够直接调用昇腾 NPU，为开发者提供昇腾 AI 处理器的超强算力。
Python
856
1.35 K
kernelkernel
openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。
C
529
592
leetcodeleetcode
🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer（第 2 版）》、《程序员面试金典（第 6 版）》题解
Markdown
77
23
ops-transformerops-transformer
本项目是CANN提供的transformer类大模型算子库，实现网络在NPU上加速计算。
C++
1.13 K
2.74 K
docsdocs
暂无描述
Markdown
897
5.79 K
jiuwenswarmjiuwenswarm
JiuwenSwarm 是一款基于openJiuwen开发的智能AI Agent，它能够将大语言模型的强大能力，通过你日常使用的各类通讯应用，直接延伸至你的指尖。
Python
3.58 K
1.01 K
cann-learning-hubcann-learning-hub
CANN 学习中心仓，支持在线互动运行、边学边练，提供教程、示例与优化方案，一站式助力昇腾开发者快速上手。
Jupyter Notebook
1.01 K
513
ops-nnops-nn
本项目是CANN提供的神经网络类计算算子库，实现网络在NPU上加速计算。
C++
913
1.83 K
openGauss-serveropenGauss-server
openGauss kernel ~ openGauss is an open source relational database management system
C++
213
314