入门 Zed Industries 2026-09-14 17:42:19 · 0 阅读
第81章 Zed 编辑器中的 HTML 扩展与配置
HTML 支持通过 HTML 扩展提供。
- Tree-sitter: tree-sitter/tree-sitter-html
- Language Server: microsoft/vscode-html-languageservice
此扩展会自动安装，但如果你不想使用它，可以将以下内容添加到你的设置中：
{
"auto_install_extensions": {
"html": false
}
}
格式化
默认情况下，Zed 使用 Prettier 来格式化 HTML。
你可以在设置（{#kb zed::OpenSettings}）中的 语言 > HTML 下配置格式化，或者将以下内容添加到你的设置文件中：
"languages": {
"HTML": {
"format_on_save": "off",
}
}
你仍然可以通过 {#kb editor::Format} 手动触发格式化，或者打开命令面板（{#kb command_palette::Toggle}）并选择 "Format Document"。
LSP 格式化
如果你想使用 vscode-html-language-server 语言服务器的自动格式化功能来替代 Prettier，请在设置（{#kb zed::OpenSettings}）中的 语言 > HTML 下配置格式化程序，或者将以下内容添加到你的设置文件中：
"languages": {
"HTML": {
"formatter": "language_server",
}
}
你可以通过 Zed 的 settings.json 自定义 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 中使用 Tailwind CSS 语言服务器
要在 HTML 文件中获得 Tailwind CSS 语言服务器 的全部功能（自动补全、代码检查等），需要配置语言服务器，让它知道去哪里查找 CSS 类。在 settings.json 中加入以下内容：
{
"lsp": {
"tailwindcss-language-server": {
"settings": {
"experimental": {
"classRegex": ["class=\"([^\"]*)\""]
}
}
}
}
}
配置完成后，就可以在 HTML 的 class 属性中获得 Tailwind CSS 类的补全了。例如：
<div class="flex items-center <completion here>">
<p class="text-lg font-bold <completion here>">Hello World</p>
</div>
