This Vim plugin provides GraphQL file detection, syntax highlighting, and indentation. It currently targets the June 2018 edition of the GraphQL specification.
Using vim-plug
- Add
Plug 'jparise/vim-graphql'
to~/.vimrc
vim +PluginInstall +qall
mkdir -p ~/.vim/pack/jparise/start
cd ~/.vim/pack/jparise/start
git clone https://github.com/jparise/vim-graphql.git graphql
vim -u NONE -c "helptags graphql/doc" -c q
Complete syntax highlighting is enable for the graphql
filetype. This
filetype is automatically selected for filenames ending in .graphql
,
.graphqls
, and .gql
.
If you would like to enable automatic syntax support for more file extensions
(e.g., *.prisma
), create a file named ~/.vim/after/ftdetect/graphql.vim
containing autocommand lines like:
au BufNewFile,BufRead *.prisma setfiletype graphql
GraphQL syntax support inside of ES2015 template literals is provided. It works "out of the box" with Vim 8.2+'s JavaScript and TypeScript language support. The extended JavaScript syntax provided by the vim-javascript plugin is also supported.
For older versions of Vim, TypeScript support can be enabled by installing the yats plugin.
const query = gql`
{
user(id: ${uid}) {
firstName
lastName
}
}
`;
The list of recognized tag names is defined by the g:graphql_javascript_tags
variable, which defaults to ["gql", "graphql", "Relay.QL"]
.
Syntax highlighting within .jsx
/ .tsx
files is also supported. These
filetypes can be "compound" (javascript.jsx
) or use the "react" variant
(javascriptreact
).
Syntax highlighting is also available within Vue templates.
The test suite uses Vader.vim. To run all of the tests from the command line:
make test
This code is released under the terms of the MIT license. See LICENSE
for
details.