第57章 Astro 语言服务器配置指南

通过 Astro 扩展即可获得 Astro 支持。

• Tree-sitter：virchau13/tree-sitter-astro
• Language Server：withastro/language-tools

在 Astro 中使用 Tailwind CSS Language Server

想在 Astro 文件中使用 Tailwind CSS language server 的全部功能（自动补全、代码检查等），需要配置该 language server，让它知道去哪里查找 CSS 类，方法是在 settings.json 中添加以下内容：

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

配置完成后，即可在 Astro 模板文件中获得 Tailwind CSS 类的自动补全。例如：

---
const active = true;
---

<!-- 标准 class 属性 -->
<div class="flex items-center <completion here>">
  <p class="text-lg font-bold <completion here>">Hello World</p>
</div>

<!-- class:list 指令 -->
<div class:list={["flex", "items-center", "<completion here>"]}>
  Content
</div>

<!-- 条件类名 -->
<div class:list={{ "flex <completion here>": active, "hidden <completion here>": !active }}>
  Content
</div>