第120章 Vue 支持

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

• Tree-sitter：tree-sitter-grammars/tree-sitter-vue
• 语言服务器：vuejs/language-tools

初始化选项

指定 TypeScript SDK 位置

默认情况下，该扩展假设你在包含 node_modules 目录的项目中工作，并会在此目录内搜索 TypeScript SDK。

但这种情况并非总是适用；例如，在使用 Yarn PnP 的项目中就没有 node_modules 目录。对于编辑器支持，文档中介绍的解决方案是运行类似 yarn dlx @yarnpkg/sdks 的命令。在这种情况下，你可以在 Zed 配置中提供以下初始化选项：

{
  "lsp": {
    "vue": {
      "initialization_options": {
        "typescript": {
          "tsdk": ".yarn/sdks/typescript/lib"
        }
      }
    }
  }
}

设置选项

lsp.vue.settings 会直接传递给 Vue 语言服务器（Volar / vuejs/language-tools）。以下设置默认已启用：

{
  "lsp": {
    "vue": {
      "settings": {
        // 在内联事件处理器中为 $event 参数显示内联提示。
        "vue.inlayHints.inlineHandlerLeading": true,
        // 当模板中缺少必需的组件属性时显示提示。
        "vue.inlayHints.missingProps": true,
        // 为包裹组件选项的模式显示内联提示。
        "vue.inlayHints.optionsWrapper": true,
        // 显示与 `v-bind` 简写 (`:`) 相关的内联提示。
        "vue.inlayHints.vBindShorthand": true
      }
    }
  }
}

你可以在此处找到上游设置的配置模式（schema）。

注意：某些设置（如 vue.editor.focusMode）可能不生效。

在 Vue 中使用 Tailwind CSS 语言服务器

要在 Vue 文件中获取 Tailwind CSS 语言服务器提供的完整功能（自动补全、语法检查等），需要在 settings.json 中添加以下配置，告诉语言服务器在何处查找 CSS 类：

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

配置好这些设置后，即可在 Vue 模板文件中获得 Tailwind CSS 类的自动补全。示例：

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

  <!-- 动态 class 绑定 -->
  <div
    :class="
      active ? 'bg-blue-500 <completion here>' : 'bg-gray-200 <completion here>'
    "
  >
    Content
  </div>

  <!-- 数组语法 -->
  <div :class="['flex', 'items-center', '<completion here>']">Content</div>

  <!-- 对象语法 -->
  <div
    :class="{
      'flex <completion here>': isFlex,
      'block <completion here>': isBlock,
    }"
  >
    Content
  </div>
</template>