在vscode中，是否有一种方法可以在 ` `（重音符号）中突出GraphQL TypeDef的语法？

Question

我想对typeDef中的代码进行语法高亮处理，这可行吗？

有什么扩展可以做到这一点吗？还是说我必须以其他方式对typeDef进行编码？

export const typeDef = `
 type User {
  _id: ID!
  email: String!
  password: String
  createdEvents: [Event!]
 }

 type AuthData {
  userId: ID!
  token: String!
  tokenExpiration: Int!
 }

 input UserInput {
  email: String!
  password: String!
 }
`;

- Danilo Cunha

Answer 1

使用 String.raw 让 VSCode 支持 GraphQL 语法高亮，同样也适用于其他语言。

export const gql = String.raw

export const typeDef = gql`
  type User {
    _id: ID!
    email: String!
    password: String
    createdEvents: [Event!]
  }

  type AuthData {
    userId: ID!
    token: String!
    tokenExpiration: Int!
  }

  input UserInput {
    email: String!
    password: String!
  }
`

- deadcoder0904

---

这对我有用。 - Kavindu Chamith

这太棒了。 - undefined

Answer 2

假设您正在使用正确的扩展程序，您需要使用来自graphql-tag的gql标签。

const gql = require('graphql-tag')

const typeDefs = gql`
  type User { ... }
`

该标签解析提供的字符串并返回一个DocumentNode对象，应将其传递给makeExecutableSchema或ApolloServer构造函数。在客户端，ApolloClient使用的查询也应为DocumentNode对象，并且应以相同的方式包装。

该扩展能够检测标签的使用情况并相应地应用语法高亮。

- Daniel Rearden

---

谢谢！这正是我需要的。我有这个扩展，但是我没有正确地重新配置它。 - Danilo Cunha

@DaniloCunha 你也可以使用一个小技巧 const gql = String.raw 来实现语法高亮，而不需要下载 graphql-tag 或类似的包 → https://dev59.com/vEYFtIcB2Jgan1znhu7M#67135985 - deadcoder0904

export const gql = String.raw在我尝试运行服务器时没有起作用。但是当我关闭了"export"时，它起作用了。require("graphql-tag")也可以正常工作。 - Femke

export const gql = String.raw在我尝试运行服务器时没有起作用。但是当我关闭了"export"时，它起作用了。require("graphql-tag")也可以使用。 - undefined