Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>GraphQL: Syntax HighlightingNew to Visual Studio Code? Get it now.

GraphQL: Syntax Highlighting

GraphQL Foundation

|
769,175 installs
| (0) | Free
Adds syntax highlighting support for .graphql & embedded support for javascript, typescript, vue, markdown, python, php, reason, ocaml and rescript
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

GraphQL Syntax Support

Adds full GraphQL syntax highlighting and language support such as bracket matching.

  • Supports .graphql/.gql/.graphqls highlighting
  • Javascript, Typescript & JSX/TSX & Vue & Svelte
  • ReasonML/ReScript (%graphql() )
  • Python
  • PHP
  • Markdown

You'll want to install this if you do not use graphql-config, or want to use the highlighting with other extensions than vscode-graphql

Embedded Language Usage

### Javascript & Typescript

The following delimiters are accepted for syntax highlighting. If you are using any of these patterns and they do not work, please open an issue!

Template Literal Expressions

const query = gql`
  {
    id
  }
`;

you can use these template tag literal expressions anywhere you like of course

useFancyGraphQLClient(
  graphql`
  {
    id
  }
`, {
  networkStrategy: 🚀
 }
)
const query = gql.experimental`{ id }`;

and in typescript, template tag expressions with type arguments

const query = gql<MyType>`
  {
    id
  }
`;

Function Expressions

as well as normal function expressions with template literals

gql(`{ id }`);
graphql(
  `
    {
      id
    }
  `,
);

there is a bug with function expressions with type arguments like these that we need to fix:

gql<MyType>(`{ id }`);

Note, inline "" and '' string literals could also be delimited if needed, but we currently only delimit graphql template strings for obvious reasons

Comment-Delimited patterns

/* GraphQL */
const query = `
 { id }
`;
const query = `#graphql
 { id }
`;

For full autocompletion, validation and other features, you can install GraphQL.vscode-graphql, which depends on this extension

Markdown

backtick code blocks

# Hello Jan

```graphql
  query MyQuery {}
```

embedded graphql in js & ts codeblocks

simple js/tsgql & graphql template tag expression support inside any backtick codeblocks.

# Hello Jan

```js
string : X = gql`
{
  its {
    query
    time
  }
}
```

Other languages

We actually support other languages than this! just need to extend this readme even further! 🥵

Contributing

Feel free to open a PR to fix, enhance any language support, or even add new languages 😍

see:

  • the grammars
  • the applicable vscode docs

Usage Note

We would love for the other graphql extension authors to freely use this syntax extension as well! Even if your extension is designed to replace vscode-graphql, or if it's designed for other other purposes. It uses an MIT license, but attribution is always a nice gesture to the original authors :)

License

MIT License

Copyright 2022 GraphQL Contributors

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft