Today I Learned

Configure graphql syntax highlighting in VS Code

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

GraphQL file without syntax highlighting

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

GraphQL plugin for VS Code

. .

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

end_result

. .

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