必须安装graphql for vscode(prisma)、正确配置graphql.config.yml(路径相对于该文件所在目录)、手动设置.graphql文件语言模式,三者缺一不可,否则补全静默失效且vscode不报错。

装对插件、配好 graphql.config.yml、手动绑定语言模式,三者缺一不可;否则补全永远不出现,且 VSCode 不报错,只“静默失效”。
必须装 GraphQL for VSCode(作者 Prisma)
VSCode 原生不解析 GraphQL,光靠“GraphQL Language Mode”只能高亮,不能补全字段或跳转定义。市场里叫“GraphQL”的插件有多个,但只有 GraphQL for VSCode(作者 Prisma)能联动 schema 实现完整感知。装错插件(比如已归档的 GraphQL Tools 或 Apollo 的旧版)会导致 Unable to load schema from 一类错误反复出现,状态栏也永远不会显示 GraphQL: connected。
装完后必须重启 VSCode —— 仅重载窗口(Ctrl+Shift+P → “Developer: Reload Window”)不够。
graphql.config.yml 路径配置最容易写错
插件靠这个文件定位 schema,但路径规则和你直觉相反:
- 路径是相对于
graphql.config.yml所在目录,不是 VSCode 工作区根目录 -
./schema.graphql中的./会被 YAML 解析器忽略,应直接写schema.graphql - Windows 用户禁用反斜杠:
schema\schema.graphql是非法的,必须写schema/schema.graphql - 多文件 schema 需用数组:
schemaPath: ["schema/types.graphql", "schema/queries.graphql"] - 远程 endpoint(如
http://localhost:4000/graphql)需确保服务已启动,且响应头含Access-Control-Allow-Origin: *或至少允许file://
.graphql 文件必须手动设为 GraphQL 语言模式
VSCode 不会自动识别 .graphql 或 .gql 后缀为 GraphQL 语言,即使插件已装好。不设置会导致补全完全关闭,Ctrl+Click 跳转失败,但语法错误提示仍可能显示——容易误判“配置成功”。
两种方式任选其一:
- 打开任意
.graphql文件 → 点右下角语言标识(如“Plain Text”)→ 选择GraphQL - 在
settings.json中加:"files.associations": {"*.graphql": "graphql", "*.gql": "graphql"}
如果项目里用的是 JS/TS 中的 gql 模板字面量,还需在 settings.json 补上:"graphql.taggedTemplateLiteralName": ["gql"],否则插件无法识别查询上下文。
补全失效时,先看 Output 面板里的 GraphQL 日志
Language Server 出错时,VSCode 界面零提示,只表现为“没补全”“跳转灰掉”。必须打开 Output 面板(Ctrl+Shift+U),下拉菜单选 GraphQL,查看真实错误:
-
Failed to load schema:90% 是schemaPath错、文件不存在、或远程 endpoint 返回 401/403 -
No document found for position:通常是 gql 模板没单独成行,比如写成const q = gql`...` + ''或嵌套在对象里 -
Unknown fragment:fragment 定义不在同一文件,也没通过extensions.graphql.include引入
本地 schema 更新后,插件不会自动重载 —— 修改 schema.graphql 后,需要手动重启 VSCode 或至少重载 GraphQL Language Server(Output 面板里点右上角重启按钮,如果有)。











