在 Zed 中配置 Svelte 语言支持：语言服务器、Inlay Hints 与 Tailwind CSS 实战指南

Svelte 是一种将组件编译为高效原生 JavaScript 的 UI 框架，其单文件组件（.svelte）同时包含 HTML 模板、<script> 与 <style> 三段结构。本文基于 Zed 仓库中 Svelte 语言的官方配置文档（docs/src/languages/svelte.md），讲解如何在 Zed 中启用 Svelte 智能提示与语法高亮、定制指令（directive）与修饰符（modifier）的着色、让 svelte-language-server 返回 Inlay Hints，以及打通 Tailwind CSS 语言服务器在 .svelte 文件中的自动补全。读完你可以直接复制文中的配置到自己的 settings.json 中落地生效，并理解每一段配置背后的实现原理。

Svelte 在 Zed 中的支持架构

在 Zed 中，Svelte 语言支持并非完全内置，而是通过 Zed 的 Svelte 扩展（extension） 提供，主要依赖两个上游组件：

• Tree-sitter 语法解析：使用 tree-sitter-svelte 语法库，负责语法树的解析、语法高亮与结构化编辑。
• 语言服务器：使用 svelte-language-server（来自 sveltejs/language-tools 项目），负责代码补全、诊断、悬停信息、跳转定义、重命名等语言智能功能。

从仓库的 languages 总览文档 可以看到，Svelte 被列为需要通过扩展提供的语言之一（未标注为内置 *）。安装 Svelte 扩展后，Zed 会按 assets/settings/default.json 中预置的默认语言配置接管该语言：

"Svelte": {
  "language_servers": ["svelte-language-server", "..."],
  "prettier": {
    "allowed": true,
    "plugins": ["prettier-plugin-svelte"],
  },
},

这段默认配置揭示了三个关键默认行为：

1. 语言服务器顺序：默认启用 svelte-language-server，"..." 表示还允许追加其他 LSP，因此你可以通过 languages 设置调整服务器列表或增删其他服务器。
2. 格式化即开即用：Svelte 文件的 prettier 格式化默认被允许（allowed: true），且默认挂载 prettier-plugin-svelte 插件，保证 .svelte 文件能被 Prettier 正确解析与格式化。
3. 若需调整格式化策略，可在 settings.json 中通过 "languages": { "Svelte": { "prettier": { "allowed": false } } } 之类的配置覆盖默认行为。

自定义指令与修饰符的语法着色

.svelte 模板中的指令（directive）语法是 Svelte 区别于普通 HTML 的核心特性，例如 class:foo、on:click、bind:value、use:action。Zed 通过 Svelte 的 Tree-sitter 语法把这些指令的关键字与末尾的修饰符解析成专门的语法节点，允许你在主题的 syntax 映射表中单独定制它们的颜色：

• attribute.function：指令的关键字部分（即 class:foo 中的 class、on:click 中的 on），例如文档注释所述："the on or class part of the attribute"。
• attribute.special：指令末尾的修饰符（modifier）部分，例如 on:click|preventDefault|stopPropagation 中 | 之后链式书写的修饰符。

示例配置如下（出自原文档）：

"syntax": {
  // Styling for directives (e.g., `class:foo` or `on:click`) (the `on` or `class` part of the attribute).
  "attribute.function": {
    "color": "#ff0000"
  },
  // Styling for modifiers at the end of attributes, e.g. `on:<click|preventDefault|stopPropagation>`
  "attribute.special": {
    "color": "#00ff00"
  }
}

注意：该代码片段展示的是主题文件里 syntax 映射表的结构（类似仓库主题 assets/themes/one/one.json 中以 attribute、comment.doc 等点分键组织语法样式的方式）。在实际使用中有两种落地方式，见 Zed 的自定义语法高亮文档与主题覆盖文档：

方式一：通过 theme_overrides 在 settings.json 中覆盖当前主题

{
  "theme_overrides": {
    "One Dark": {
      "syntax": {
        "attribute.function": {
          "color": "#ff0000"
        },
        "attribute.special": {
          "color": "#00ff00"
        }
      }
    }
  }
}

theme_overrides 允许你在不改动原主题文件的前提下，针对某个具体主题覆盖任意语法样式键。

方式二：放入自定义主题 JSON：在 ~/.config/zed/themes/ 下创建自定义主题文件，把上述 syntax 映射表写进主题的 syntax 节中，Zed 启动后会自动识别该主题。

每个样式值除 color 外，还可以使用 font_style（如 "italic"）、font_weight 等属性做进一步控制。

在 .svelte 文件中启用 Inlay Hints

Zed 编辑器的 Inlay Hints（内联提示，即在代码行内显示参数名、类型等注解）由 Zed 侧的总开关控制。查看 assets/settings/default.json 中 inlay_hints 节点的默认值：

"inlay_hints": {
  "enabled": false,
  "show_type_hints": true,
  "show_parameter_hints": true,
  "show_value_hints": true,
  "show_other_hints": true,
  "show_background": false,
  "edit_debounce_ms": 700,
  "scroll_debounce_ms": 50,
  ...
}

其中 enabled 默认为 false，需要在你的 settings.json 中显式打开。关键机制：只有当 Zed 的 Inlay Hints 处于启用状态时，Zed 才会在启动 svelte-language-server 时下发下述初始化选项，请求语言服务器计算并返回各类内联提示。Zed 默认下发给 svelte-language-server 的选项为（出自原文档）：

"inlayHints": {
  "parameterNames": {
    "enabled": "all",
    "suppressWhenArgumentMatchesName": false
  },
  "parameterTypes": {
    "enabled": true
  },
  "variableTypes": {
    "enabled": true,
    "suppressWhenTypeMatchesName": false
  },
  "propertyDeclarationTypes": {
    "enabled": true
  },
  "functionLikeReturnTypes": {
    "enabled": true
  },
  "enumMemberValues": {
    "enabled": true
  }
}

各字段语义整理如下：

配置键	作用	取值范围 / 说明
parameterNames.enabled	是否为参数显示内联名称	"all"（全部显示）、"literals"（仅在实参为字面量时显示）、"none"
parameterNames.suppressWhenArgumentMatchesName	实参名与参数名一致时是否隐藏提示	true / false
parameterTypes.enabled	是否为函数参数显示类型注解	true / false
variableTypes.enabled	是否为变量显示类型注解	true / false
variableTypes.suppressWhenTypeMatchesName	变量名与类型同名时是否隐藏提示	true / false
propertyDeclarationTypes.enabled	是否为属性声明显示类型	true / false
functionLikeReturnTypes.enabled	是否为函数式对象显示返回类型	true / false
enumMemberValues.enabled	是否为枚举成员显示值	true / false

如何覆盖这些默认值

由于 svelte-language-server 对脚本部分的类型服务复用自 TypeScript 语言服务体系，这些选项的命名空间在 svelte-language-server 中通过 configuration.typescript 与 configuration.javascript 分别对应 <script lang="ts"> 与普通 <script> 场景（相关选项形状可参考 TypeScript 语言服务器扩展的 package.json）。若想覆盖 Zed 的默认行为，在 settings.json 中写入：

{
  "lsp": {
    "svelte-language-server": {
      "initialization_options": {
        "configuration": {
          "typescript": {
            // 例如：只对字面量实参显示参数名
            "inlayHints": {
              "parameterNames": {
                "enabled": "literals"
              }
            }
          },
          "javascript": {
            // ......
          }
        }
      }
    }
  }
}

通过 "lsp": { "svelte-language-server": { "initialization_options": ... } } 这一 Zed 标准入口，你可以为 svelte-language-server 下发任意初始化配置。示例中省略号 // ...... 处可按需补充与你目标一致的完整配置对象。

让 Tailwind CSS 语言服务器识别 Svelte 文件

Tailwind CSS 的专用语言服务器默认只扫描它能识别的语言。Zed 内置的 Tailwind 适配器（见 crates/languages/src/tailwind.rs）中有一张 language_ids 映射表，把 Zed 侧的语言名映射为发给 tailwindcss-language-server 的 LSP 语言标识——其中就包含 Svelte → "svelte"。也就是说，当你在 Zed 中打开 .svelte 文件时，Tailwind 语言服务器会收到文档语言标识 svelte。

但 Tailwind 语言服务器自己并不了解 Svelte 模板的类名书写语法，因此还需要两步配置：

1. 通过 includeLanguages 把 svelte 关联到 html，让 Tailwind 服务器按 HTML 模板的语义去扫描。
2. 通过 experimental.classRegex 提供一组正则，告知 Tailwind 服务器在 Svelte 各种类名写法中如何抽取“等待补全的类名片段”。

完整配置如下（出自原文档，直接放入 settings.json）：

{
  "lsp": {
    "tailwindcss-language-server": {
      "settings": {
        "includeLanguages": {
          "svelte": "html"
        },
        "experimental": {
          "classRegex": [
            "class=\"([^\"]*)\"",
            "class='([^']*)'",
            "class:\\s*([^\\s{]+)",
            "\\{\\s*class:\"([^\"]*)\"",
            "\\{\\s*class:\\s*'([^']*)'"
          ]
        }
      }
    }
  }
}

逐条解释这 5 条正则分别覆盖的 Svelte 写法：

正则	匹配的目标写法
class="([^"]*)"	双引号的标准 class 属性
class='([^']*)'	单引号的标准 class 属性
class:\s*([^\s{]+)	class: 指令（如 class:active="..."）
\{\s*class:\s*"([^"]*)"	表达式花括号中的双引号类名字符串（如 class={cond ? "flex" : "hidden"}）
\{\s*class:\s*'([^']*)'	表达式花括号中的单引号类名字符串

配置完成后，Zed 就会在 Svelte 文件的类名位置触发 Tailwind 类名补全。以下为可验证的触发场景（出自原文档）：

<!-- Standard class attribute -->
<div class="flex items-center <completion here>">
  <p class="text-lg font-bold <completion here>">Hello World</p>
</div>

<!-- Class directive -->
<button class:active="bg-blue-500 <completion here>">Click me</button>

<!-- Expression -->
<div class={active ? "flex <completion here>" : "hidden <completion here>"}>
  Content
</div>

其中 <completion here> 是类名候选出现的位置：普通 class 属性、class: 指令与 class={...} 表达式三种形态均能被正确解析，从而获得补全、悬停预览与 lint 等 Tailwind 全量能力。

相关阅读与进一步探索

• Zed 语言支持总览：查看 Svelte 与其余语言的支持方式归属（内置或扩展）。
• Tailwind CSS 语言支持文档：了解 Tailwind CSS 语言服务器在 Zed 中的通用配置。
• TypeScript 语言支持文档：inlayHints 命名空间的同源实现（vtsls / typescript-language-server 场景）。
• 自定义语法高亮：理解 theme_overrides 与主题 syntax 映射表机制。
• 主题定制与覆盖：掌握 syntax 样式键在主题 JSON 与 settings.json 中的放置规则。
• Tailwind 适配器源码：查看 Zed 如何为各语言建立到 Tailwind 语言服务器的 language_ids 映射与默认 includeLanguages。