How can I make my VS Code extension provide suggestions and syntax-highlighting for non-JS code in ES6 tagged template literal strings?

Question

I’m working on a GraphQL extension for Visual Studio Code that implements syntax highlighting and auto-completion for GraphQL schemas and queries. It currently works on files ending with the .gql extension. However, a common GraphQL usage is to define inline queries inside JavaScript/TypeScript files, for instance:

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

How could I support the highlighting and suggestion (autocompletion) features that my extension implements in ES6 (named) tagged template literal strings?

For anyone else also looking for a solution, a tracking bug is raised in the vscode github repo here: github.com/Microsoft/vscode/issues/5961 — Sep 14, 2016 at 11:29

score 1 · Accepted Answer · 2023-08-23 01:29:41Z

As linked in the comments under the question post, this is related to this github issue: Extension providing language support in ES6 template strings #5961, which was resolved by this comment by one of the maintainers, Matt Bierner:

VS Code Extensions can now bundle ts server plugins. This allows extension authors to write a vscode extension that adds syntax highlighting + intellisense for template strings.

Two extensions are already making use of this: […]

I did a quick google of graphql ts server plugin and found this: https://www.npmjs.com/package/ts-graphql-plugin.

Quoting from its readme’s "getting started" section:

First, confirm that your project has TypeScript and graphql(v15.x.0 or later).

To install this plugin, execute the following:
npm install ts-graphql-plugin -D
And configure plugins section in your tsconfig.json, for example:
{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "plugins": [
      {
        "name": "ts-graphql-plugin",
        "schema": "path-or-url-to-your-schema.graphql",
        "tag": "gql"
      }
    ]
  }
}
It’s ready to go. Launch your TypeScript IDE.

So to answer your question of "How could I support the highlighting and autocompletion features that my extension implements in ES6 (named) template string?", either you don’t need to (just tell your users to include that TypeScript Server plugin), or you can find some way to integrate that into your plugin.

You could also try to take inspiration from the approach used by the Template Literal Editor extension ^{_{(I have no affiliation with this extension)}}.

Quoting from its readme:

Open ES6 template literals and other configurable multi-line strings or heredocs in any language in a synced editor, with language support (HTML, CSS, SQL, shell, markdown etc).

Instructions: […]

Other related tools:

This won’t add suggestions, but for syntax highlighting in tagged template literal strings, there is the comment-tagged-templates extension by Matt Bierner.

How can I make my VS Code extension provide suggestions and syntax-highlighting for non-JS code in ES6 tagged template literal strings?