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