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?
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:
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:
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:
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.