Configure graphql syntax highlighting in VS Code

Initially, gql query/mutation are displayed as regular strings.

To enable syntax highlighting, autocompletion, and validation for graphql query/mutation definition in VSCode follow few steps.

. .

Step 1

Open Extensions tab in your VS Code and install GraphQL plugin

. .

Step 2

Create a new file graphql.config.json file in your project’s root folder.

{
  "name": "Name of your Project",
  "schemaPath": "./schema.json",
  "extensions": {
    "endpoints": {
      "Default GraphQL Endpoint": {
        "url": "URL_to_your_graphql",
      }
    }
  }
}

. .

End result

Now you should have syntax highlighting, autocompletion, and validation in your graphql files based on your graphql schema

. .

Additioanl info

Any problems with the setup? Please check out the plugin documentation

If you’re using Apollo in your project you can try the Apollo GraphQL Extension for VS Code

Tweet