GraphQL 是一种新兴的 API 查询语言，在开发过程中它已经成为前端工程师不可或缺的一部分。为了更加方便地编写 GraphQL，我们需要一些工具来加速开发流程。npm 包 graphql-language-service 就是这样一款极好的工具。
graphql-language-service 是什么？
graphql-language-service 是一个可以为编辑器提供语法高亮和验证 GraphQL 查询的工具包。它旨在提供代码补全和自动完成等代码功能，尤其适合需要频繁编写 GraphQL 查询语句的团队。
我们可以用 graphql-language-service 来加速 GraphQL 编程的速度和质量。
安装 graphql-language-service
npm 安装：
npm install graphql-language-service
项目结构
先看一下我们的工作目录结构，假定我们的项目结构如下：
-- -------------------- ---- ------- --- ------- --- ---- - --- ------ - --- -------- - --- -------- - --- -------- - --- ---------- --- ---------- --- ------------ --- --------- --- --------- --- --------------
为编辑器添加 graphql-language-service
为我们目前所使用的编辑器添加 graphql-language-service 非常简单，只需在编辑器管理的插件中搜索 "GraphQL" 或 "graphql-language-service" 进行安装即可。
安装完毕后，我们通过编辑器 eslint 插件可以快速启用它。
使用 graphql-language-service
现在开始使用 graphql-language-service。在编辑器中打开一个 GraphQL 查询文件，就会发现它会自动进行语法高亮和验证。特别是，在编辑器中输入："{fooBar{", 会发现它会提示出所有可以使用的字段。这样，我们就可以快速编写想要的查询内容了。
示例代码：
-- -------------------- ---- -------
----- ---------------- ---- -
-------- -------- -
--
-----
----
-------- -
--
-------
---- -
--
----
-
-
-
-代码自动完成
编辑器能够针对我们输入的 GraphQL 查询，进行高效的自动完成。我们只需要在编辑器中键入 { 即可。
使用自动完成可以快速地编写出正确的查询语句，从而无需再次查阅文档。
查询验证
graphql-language-service 可以根据当前正在编写的查询进行语法验证，以便帮助我们在编写过程中及时发现错误。
举个栗子：
query user {
user(id: 123) {
name
}
}如果我们在输入 name 后不确定内容是否正确，可以敲入编写代码时编辑器绑定的快捷键，查看到该查询结果，从而得知结果是否正确。
总结
在进行 GraphQL 开发的过程中， graphql-language-service 可以帮助我们提高代码的生产力和质量。在使用的过程中，我们遇到的问题，只需要使用 graphql-language-service 现有的功能即可轻松解决。
用 npm 包 graphql-language-service 来为你的编辑器提供更多便利吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eeeb9457a6cc516fbab6e20