第113章 Zed编辑器中的Svelte支持

通过 Svelte 扩展可以获得 Svelte 支持。

• Tree-sitter：tree-sitter-grammars/tree-sitter-svelte
• Language Server：sveltejs/language-tools

额外的主题样式配置

你可以自定义属性中某些语法（如指令和修饰符）的显示样式：

"syntax": {
  // 指令的样式（如 `class:foo` 或 `on:click`），即属性中的 `on` 或 `class` 部分。
  "attribute.function": {
    "color": "#ff0000"
  },
  // 属性末尾修饰符的样式，如 `on:<click|preventDefault|stopPropagation>`
  "attribute.special": {
    "color": "#00ff00"
  }
}

Inlay Hints（内联提示）

当 Zed 中启用了 inlay hints 时，为了让 language server 返回这些提示，Zed 会设置以下初始化选项：

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

如需覆盖这些设置，可以这样配置：

"lsp": {
  "svelte-language-server": {
    "initialization_options": {
      "configuration": {
        "typescript": {
          // ......
        },
        "javascript": {
          // ......
        }
      }
    }
  }
}

更多信息请参阅 TypeScript language server 的 package.json。

在 Svelte 中使用 Tailwind CSS Language Server

要在 Svelte 文件中启用 Tailwind CSS language server 的所有功能（自动补全、代码检查等），需要在 settings.json 中添加以下配置，指定语言服务器查找 CSS 类名的位置：

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

配置完成后，Svelte 文件中的 Tailwind CSS 类名将支持自动补全。示例：

<!-- 标准 class 属性 -->
<div class="flex items-center <此处补全>">
  <p class="text-lg font-bold <此处补全>">Hello World</p>
</div>

<!-- class 指令 -->
<button class:active="bg-blue-500 <此处补全>">Click me</button>

<!-- 表达式 -->
<div class={active ? "flex <此处补全>" : "hidden <此处补全>"}>
  Content
</div>