orta / vscode-graphql

GraphQL plugin for VS Code

VSCode GraphQL

GraphQL extension VSCode built with the aim to tightly integrate the GraphQL Ecosystem with VSCode for an awesome developer experience.

Features

General features

• Load the extension on detecting graphql-config file at root level or in a parent level directory
• Load the extension in .graphql, .gql files
• Load the extension on detecting gql tag in js, ts, jsx, tsx, vue files
• Support graphql-config file with one project and multiple projects

.graphql, .gql file extension support

• syntax highlighting (type, query, mutation, interface, union, enum, scalar, fragments)
• autocomplete suggestions
• validation against schema
• snippets (interface, type, input, enum, union)
• hover support
• go to definition support (input, enum, type)

gql tagged template literal support

• syntax highlighting (type, query, mutation, interface, union, enum, scalar, fragments)
• autocomplete suggestions
• validation against schema
• snippets

Usage

Just install the VSCode GraphQL Extension. This extension adds syntax highlighting and IntelliSense for graphql files and gql tags.

This extension requires a valid .graphqlconfig.yml file in the project root. You can read more about that here.

To support language features like "go-to definition" across multiple files, please include includes key in the graphql-config per project. For example,

projects:
  app:
    schemaPath: src/schema.graphql
    includes: ["**/*.graphql"]
    extensions:
      endpoints:
        default: http://localhost:4000
  db:
    schemaPath: src/generated/db.graphql
    includes: ["**/*.graphql"]
    extensions:
      codegen:
      - generator: graphql-binding
        language: typescript
        output:
          binding: src/generated/db.ts

Notice that includes key supports glob pattern and hence ["**/*.graphql"] is also valid.

If you want to use a workspace version of TypeScript however, you must manually install the plugin along side the version of TypeScript in your workspace:

npm install --save-dev ts-graphql-plugin

Then add a plugins section to your tsconfig.json or jsconfig.json

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "ts-graphql-plugin"
      }
    ]
  }
}

Finally, run the Select TypeScript version command in VS Code to switch to use the workspace version of TypeScript for VS Code's JavaScript and TypeScript language support. You can find more information about managing typescript versions in the VS Code documentation.

Development

Testing GraphQL Language Features

1. Clone the repository - https://github.com/prismagraphql/vscode-graphql
2. npm install
3. Open it in VSCode
4. Go to the debugging section and run the launch program "Extension"
5. This will open another VSCode instance with extension enabled
6. Open a project with a graphql config file - ":electric_plug: graphql" in VSCode status bar indicates that the extension is in use

Testing TypeScript GraphQL Plugin Features

1. Go to vscode-graphql/ts-graphql-plugin
2. npm install and npm link
3. Use npm link ts-graphql-plugin in the folder that you have opened to test things in extension host - this is required for development
4. Switch to use workspace typescript - this is required for development

License

MIT