add a file to grammars following our other examples.
be sure to add it to package.json contributions as well, in the grammars section. the text.html.markdown is for applying to markdown codeblocks
use a scope ala source.{lang} from a vscode-provided syntax grammar, or a popular, official contributed grammar. To find the name of the scope for any token's highlighting, use Developer: Inspect Editor Tokens & Scopes from the vscode command palette.
name it inline.graphql.{lang} for consistency
add a test file tests/__fixture__ to document example usage, and a test spec to __tests__ to assert the snapshot, pointing to the source you created
run yarn test -u in the workspace to add the snapshot
use the snapshots to ensure your capture groups are working and serializing the graphql as expected
in the test fixture, document all working cases and non working cases with Todo comments for common usage in your language. be sure to think of cases such as string interpolation and generics for typed languages.
add it to the list above in the readme, with links to your test fixtures as usage documentation
to manually test it in vscode itself, run yarn vsce:package in the syntax extension workspace and right click and install the bundled vsix file, then view the test fixture
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 :)
GraphQL Syntax Support
Adds full GraphQL syntax highlighting and language support such as bracket matching.
.graphql
/.gql
/.graphqls
highlighting%graphql()
) (example: test.re)You'll want to install this if you do not use
graphql-config
, or want to use the highlighting with other extensions thanvscode-graphql
Contributing
Feel free to open a PR to fix, enhance any language support, or even add new languages 😍
see:
Contributor Guide: Improving a Language
Whether fixing a bug or adding a new delimiter for your language, here are a few tips for you:
tests/__fixtures__
yarn test -u
in the syntax extension workspace, and observe whether vscode-textmate tokenizes your example properlymeta.embedded.block.graphql
yarn vsce:package
in the workspace and right click to install the bundled vsix extension, and open the fixture fileContributor Guide: Adding a Language
package.json
contributions as well, in thegrammars
section. thetext.html.markdown
is for applying to markdown codeblockssource.{lang}
from a vscode-provided syntax grammar, or a popular, official contributed grammar. To find the name of the scope for any token's highlighting, useDeveloper: Inspect Editor Tokens & Scopes
from the vscode command palette.inline.graphql.{lang}
for consistencytests/__fixture__
to document example usage, and a test spec to__tests__
to assert the snapshot, pointing to the source you createdyarn test -u
in the workspace to add the snapshotyarn vsce:package
in the syntax extension workspace and right click and install the bundled vsix file, then view the test fixtureUsage 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