如何让我的 VS Code 扩展为 ES6 标记模板文字字符串中的非 JS 代码提供建议和语法突出显示？

我正在开发 Visual Studio Code 的 GraphQL 扩展，它为 GraphQL 架构和查询实现语法突出显示和自动完成。目前它适用于以.gql扩大。然而，常见的 GraphQL 用法是在 JavaScript/TypeScript 文件中定义内联查询，例如：

@connect(gql`user(id: 2) { name, email }`)
function MyUIComponent({ user }) { ... }

我如何支持我的扩展在 ES6（命名）标记模板文字字符串中实现的突出显示和建议（自动完成）功能？

正如问题帖子下评论中所链接的，这与此 github 问题相关：在 ES6 模板字符串中提供语言支持的扩展 #5961 https://github.com/microsoft/vscode/issues/5961，已解决维护者之一 Matt Bierner 的评论 https://github.com/microsoft/vscode/issues/5961#issuecomment-360890376:

VS Code 扩展现在可以捆绑 ts 服务器插件 https://github.com/Microsoft/vscode/issues/41113。这允许扩展作者编写一个 vscode 扩展，为模板字符串添加语法突出显示 + 智能感知。

两个扩展已经在使用它：[...]

我快速谷歌了一下graphql ts server plugin并发现了这个：https://www.npmjs.com/package/ts-graphql-plugin https://www.npmjs.com/package/ts-graphql-plugin.

引用自它的自述文件的“入门”部分 https://github.com/Quramy/ts-graphql-plugin#getting-started:

首先，确认您的项目具有 TypeScript 和 graphql（v15.x.0 或更高版本）。

要安装此插件，请执行以下命令：

npm install ts-graphql-plugin -D

并配置pluginstsconfig.json 中的部分，例如：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "plugins": [
      {
        "name": "ts-graphql-plugin",
        "schema": "path-or-url-to-your-schema.graphql",
        "tag": "gql"
      }
    ]
  }
}

准备好了。启动您的 TypeScript IDE。

所以回答你的问题“我如何支持我的扩展在 ES6（命名）模板字符串中实现的突出显示和自动完成功能？”，要么您不需要（只需告诉您的用户包含该 TypeScript Server 插件），要么您可以找到某种方法将其集成到您的插件中。

You could also try to take inspiration from the approach used by the Template Literal Editor https://marketplace.visualstudio.com/items?itemName=plievone.vscode-template-literal-editor extension ^{_{(I have no affiliation with this extension)}}.

引用其自述文件：

在同步编辑器中以任何语言打开 ES6 模板文字和其他可配置的多行字符串或此处文档，并提供语言支持（HTML、CSS、SQL、shell、markdown 等）。

指示： [...]

其他相关工具：

这不会添加建议，但对于标记模板文字字符串中的语法突出显示，有评论标记模板 https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates马特·比尔纳的扩展。