VSCode 扩展：内联 ES6 模板字符串的语言

Question

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

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

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

Answer 1

正如问题帖子下评论中所链接的，这与此 github 问题相关：Extension getting language support in ES6 template strings #5961 ，该问题已由维护者之一 Matt Bierner 的此评论解决：

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

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

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

引用其自述文件的“入门”部分：

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

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

npm install ts-graphql-plugin -D

并在 tsconfig.json 中配置plugins部分，例如：

{
  "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 插件），或者您可以找到某种方法将其集成到您的插件中。

您还可以尝试从模板文字编辑器扩展使用的方法中获取灵感^{_{（我与此扩展没有任何关系）}}。

引用其自述文件：

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

指示： [...]

其他相关工具：

这不会添加建议，但对于标记模板文字字符串中的语法突出显示，Matt Bierner 提供了comment-tagged-templates扩展。