vetur: Support GraphQL custom block
Problem
Some emerging Vue frameworks, remarkably Gridsome, use GraphQL custom blocks for data pre-fetching. Nonethewise, Vetur currently doesn’t support GraphQL custom block highlighting.
A possible obstacle is that currently VS Code, by default, doesn’t include a graphql
language server (for file extension gql
).
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 18 (7 by maintainers)
Commits related to this issue
- Update docs for #975 — committed to vuejs/vetur by octref 4 years ago
Here you go:
Steps:
Install one of the VS Code Graphql extensions
Have this setting:
Run command
Vetur: Generate Grammar
The solution above worked for me…except for
<static-query>
. So be sure to add it afterpage-query
, like so:@dosstx You can run it via the Command Palette (
Ctrl+Shift+P
).We do have custom block support, so this is not hard to do. I just need to register
graphql
as one of the embeddable languages.@octref Here,
<page-query>
and<static-query>
are custom GraphQL blocks: https://gridsome.org/docs/data-query-dataFor those wondering why it doesn’t highlight it even after applying @octref 'solution, try restarting VSCode. It didn’t work for me when I changed the setting, but after opening VSCode the next day it worked.