https://github.com/jparise/vim-graphql

A Vim plugin that provides GraphQL file detection, syntax highlighting, and indentation.
https://github.com/jparise/vim-graphql

graphql graphql-schema neovim vim

Last synced: 23 days ago
JSON representation

A Vim plugin that provides GraphQL file detection, syntax highlighting, and indentation.

• Host: GitHub
• URL: https://github.com/jparise/vim-graphql
• Owner: jparise
• License: mit
• Created: 2015-12-31T00:44:29.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2024-08-06T13:40:06.000Z (3 months ago)
• Last Synced: 2024-09-27T21:40:59.338Z (about 1 month ago)
• Topics: graphql, graphql-schema, neovim, vim
• Language: Vim Script
• Homepage:
• Size: 161 KB
• Stars: 486
• Watchers: 9
• Forks: 25
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-graphql - vim-graphql - A Vim plugin that provides GraphQL file detection and syntax highlighting. (Tools / Julia Libraries)
• awesome-list - vim-graphql

README

        
# GraphQL for Vim

This Vim plugin provides [GraphQL](https://graphql.org/) file detection, syntax

highlighting, and indentation. It currently targets the [October 2021

Edition](https://spec.graphql.org/October2021/) of the GraphQL specification.

## Installation

This plugin requires Vim version 8 or later. Equivalent Neovim versions

are also supported.

### Using [vim-plug](https://github.com/junegunn/vim-plug)

1. Add `Plug 'jparise/vim-graphql'` to `~/.vimrc`

2. `vim +PluginInstall +qall`

### Using Vim Packages

```sh

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

```

## Syntax Highlighting

Complete syntax highlighting is enabled for the `graphql` [filetype][]. This

filetype is automatically selected for filenames ending in `.gql`, `.graphql`,

and `.graphqls`.

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:

```vim

au BufNewFile,BufRead *.prisma setfiletype graphql

```

[filetype]: http://vimdoc.sourceforge.net/htmldoc/filetype.html

## JavaScript and TypeScript Support

GraphQL syntax support inside of [ES2015 template literals][templates] 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.

[templates]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates

[vim-javascript]: https://github.com/pangloss/vim-javascript

[yats]: https://github.com/HerringtonDarkholme/yats.vim

```javascript

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"]`. This can also

be set on a per-buffer basis using the `b:graphql_javascript_tags` variable.

Untagged template literals passed as the first argument to specific functions

can also be recognized. `g:graphql_javascript_functions` defines this list of

functions, which defaults to `["graphql"]`. This list can also be set on a

per-buffer basis using the `b:graphql_javascript_functions` variable.

```javascript

const query = graphql(`

  {

    user(id: ${uid}) {

      firstName

      lastName

    }

  }

`;

```

You can also add a `# gql` or `# graphql` comment at the start of a template

string to indicate that its contents should be considered GraphQL syntax.

```javascript

const query = `# gql

  {

    user(id: ${uid}) {

      firstName

      lastName

    }

  }

`;

```

Syntax highlighting within `.jsx` / `.tsx` files is also supported. These

filetypes can be "compound" (`javascript.jsx` and `typescript.tsx`) or use the

"react" variants (`javascriptreact` and `typescriptreact`).

Syntax highlighting is also available within [Vue](https://vuejs.org/)

templates.

## ReasonML Support

GraphQL syntax support inside of [ReasonML](https://reasonml.org/) template

strings using [graphql-ppx][] is available.

```reason

[%graphql {|

  query UserQuery {

    user {

      id

      name

    }

  }

|}];

```

The `%relay` extension point is also supported.

[graphql-ppx]: https://github.com/reasonml-community/graphql-ppx

## ReScript Support

GraphQL syntax support inside of [ReScript](https://rescript-lang.org/)

strings is available.

```rescript

%graphql(`

  query UserQuery {

    user {

      id

      name

    }

  }

`)

```

The [`%relay` extension node][%relay] is also supported.

[%relay]: https://rescript-relay-documentation.vercel.app/docs/making-queries

## PHP Support

GraphQL syntax inside of [heredoc][] and [nowdoc][] strings is supported. The

string identifier must be named `GQL` (case-insensitive).

```php