必须先连上schema才能触发字段补全,否则ctrl+space仅补基础语法;连不上主因是graphql.config.yml路径错误、服务未运行或cors拒绝,右下角未显示“graphql: connected”即未生效。

Ctrl+Space 触发字段自动补全,但必须先连上 schema
没连上 schema 时,Ctrl+Space 只能补基础语法(比如 query、fragment),不会提示你后端实际有的字段或类型。连不上是因为:graphql.config.yml 里 schema 路径写错(比如用了 ./schema.graphql,YAML 会忽略 ./);或者服务没跑起来,schema: http://localhost:4000/graphql 返回了 404 或 CORS 拒绝;右下角没显示 GraphQL: connected 就等于没生效。
- Windows 用户路径统一用正斜杠
/,反斜杠\在 YAML 里是转义符 - 多文件 schema 要写成数组:
schema: ["src/schema/types.graphql", "src/schema/queries.graphql"] - 补全失效时,打开 Output 面板,选 GraphQL,看日志里有没有 “Failed to load schema”
Ctrl+Enter 执行查询前,得先声明 endpoint
Ctrl+Enter 本身不发送请求——它只是触发插件行为。真正执行靠的是 GraphQL Request 插件,而它只认顶部带 # GraphQL Request: 注释的文件。漏写这行,光标放再准也没用。
- 注释必须顶格、单独一行,后面紧跟 URL:
# GraphQL Request: http://localhost:4000/graphql - URL 不能带空格或换行,也不能用中文括号或全角字符
- mutation 必须紧跟着写
variables块,格式是 JSON,不能有 trailing comma,字符串必须用双引号
Ctrl+Shift+F 全局搜 API 调用,但得配合正则过滤噪音
直接搜 /user 会命中注释、路径变量、甚至 mock 数据。要精准定位真实请求,得启用正则模式(点 .* 按钮),用匹配模式缩小范围。
- 搜 fetch 调用:
fetch\([^)]*['"]\/api\/user - 搜 axios:
axios\.(get|post)\(.*['"]\/api\/user - 排除 node_modules:在搜索框下方“排除”栏填
**/node_modules/** - 限定文件类型:
src/**/*.{ts,js}这种写法比盲目扫全项目快得多
Alt+1/2/3 切换 GraphiQL 面板,但 VSCode 里得靠插件模拟
原生 GraphiQL 的 Alt+2 切结果面板、Alt+3 开文档面板,在 VSCode 里没有直接对应。你得靠 GraphQL for VSCode 插件 + Thunder Client 或 Altair 插件来模拟类似体验。
-
Thunder Client支持保存请求历史、设 headers、切环境,但界面是 REST 风格,不是 GraphiQL 那种三栏布局 -
Altair插件更接近 GraphiQL,但需手动配置 endpoint,且变量面板和文档面板响应不如原生快 - 真正想用
Alt+3看 schema 文档?悬停字段名看类型提示,或按F12跳转到.graphql文件里的定义处——这才是 VSCode 原生支持的方式
实际用起来,最常被忽略的是 schema 加载状态和 endpoint 注释格式。连不上 schema,所有快捷键都只是花架子;少一个冒号或空格,Ctrl+Enter 就静默失败,连错误提示都不给。
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!











