真正可用的是 GraphQL for VSCode(Prisma Labs 出品),需彻底重启 VSCode、正确配置 graphql.config.yml 相对路径、绑定语言模式、安装 graphql-tag 并配置插件,否则 schema 无法加载、补全和跳转失效。

别装 Apollo 官方插件——它已多年未维护,装了反而让状态栏卡在 GraphQL: disconnected,Output 面板反复报 Unable to load schema from。真正能加载本地 schema、支持字段补全和 Ctrl+Click 跳转的,只有 GraphQL for VSCode(Prisma Labs 出品)。
装完必须彻底重启 VSCode
用 Developer: Reload Window 不生效,Language Server 压根不启动。Windows/mac/Linux 全部要关掉所有窗口再重开,否则插件看似运行,实则没加载 schema。
graphql.config.yml 路径写错是校验失败主因
插件读取 schema 的路径是相对于 graphql.config.yml 所在目录,不是项目根目录,也不是当前打开的文件位置。常见错误:
-
./schema.graphql和schema.graphql等价(YAML 解析器忽略./),但若配置文件在config/graphql.config.yml,而你写schema.graphql,它就会去config/下找 - Windows 用户必须用正斜杠:
schema: schema/schema.graphql,schema\schema.graphql是非法 YAML - 多文件 schema 必须用数组:
schema: ["schema/types.graphql", "schema/queries.graphql"] - 远程 endpoint 写法:
schema: http://localhost:4000/graphql,但需确保服务已启、CORS 开放、introspection 未禁用
.graphql/.gql 文件不识别?手动绑定语言模式
VSCode 默认不把 .graphql 或 .gql 当作 GraphQL 处理,右下角显示 Plain Text 就是铁证。必须进 settings.json 手动加:
"files.associations": {
"*.graphql": "graphql",
"*.gql": "graphql",
"schema.graphql": "graphql"
}
改完必须重启 VSCode(不是重载窗口),再打开一个 .graphql 文件,确认右下角显示 GraphQL: connected。如果只显示 GraphQL 没冒号和 connected,说明 schema 没加载成功,得查 Output 面板里 GraphQL 日志。
JS/TS 中 gql 模板字符串无提示?缺两样东西
插件默认不扫描 gql`...` 这类模板字符串,除非你同时满足:
- 安装
graphql-tag:npm i -D graphql-tag - 在
tsconfig.json或jsconfig.json的compilerOptions里加:"plugins": [{"name":"@graphql-tools/graphql-tag-pluck"}] - 代码中显式导入:
import { gql } from 'graphql-tag';
三者缺一不可,否则补全、跳转、类型校验全部失效。尤其注意:插件只认 graphql-config v3+ 格式,旧版 .graphqlconfig(JSON)已不被支持。
最容易被忽略的是路径相对性——graphql.config.yml 放哪,schema 就从哪算起;其次是 Windows 斜杠方向,写反就静默失败;最后是 gql 字符串需要完整工具链配合,不是光装插件就能用。


















