必须同时装对插件、配对路径、设对语言模式三者,缺一不可;仅装prisma官方graphql插件,重启vscode,路径相对graphql.config.yml且用正斜杠,.graphql/.gql文件需手动设为graphql模式。

装对插件、配对路径、设对语言模式,三者齐备才能出提示;缺一个,gql 里敲 user 都不会补全,而且 VSCode 一声不吭。
只装 GraphQL for VSCode(Prisma 官方维护)这一个插件
其他名字带 “GraphQL” 的插件——比如已归档的 GraphQL Tools、Apollo 的旧版、甚至 GraphQL by GraphQL Foundation——都可能让状态栏卡在 GraphQL: disconnected,或者报 Unable to load schema from。装完必须重启 VSCode(不是重载窗口),否则 Language Server 压根不启动。
常见错误现象:
- 右下角始终显示
Plain Text或空着 - 悬停字段没类型信息,Ctrl+Click 跳转灰掉
-
Output面板里GraphQL日志为空或只有Starting language server...后再无下文
graphql.config.yml 的 schema 路径必须写对
路径是相对于 graphql.config.yml 所在目录,不是 VSCode 工作区根目录,也不是当前打开的文件位置。YAML 解析器会忽略 ./,所以 ./schema.graphql 和 schema.graphql 等价,但一旦配置文件不在项目根目录,就直接失效。
正确写法示例:
schema: schema.graphql # 或 schema: src/graphql/schema.graphql # 多个文件用数组 schema: ["schema/types.graphql", "schema/queries.graphql"]
Windows 用户必须用正斜杠 /,schema\schema.graphql 是非法 YAML,会导致解析失败。
远程 endpoint 写法:
schema: http://localhost:4000/graphql
注意:服务必须已启动、允许 CORS、且未禁用 introspection(否则静默失败,无任何报错)。
.graphql / .gql 文件必须手动设为 GraphQL 语言模式
VSCode 不会自动把后缀识别为 GraphQL,即使插件已装好。右下角显示 Plain Text 就等于关掉了所有智能能力。
实操建议:
- 点右下角语言标识 → 选
GraphQL - 或在
settings.json中加:"files.associations": {"*.graphql": "graphql", "*.gql": "graphql"} - 改完必须重启 VSCode(
Developer: Reload Window不够) - 确认右下角变成
GraphQL: connected,不是GraphQL单独出现
JS/TS 里的 gql 模板字符串要满足两个硬条件
插件默认只识别独立成行、标签名严格匹配的 gql 模板。任何拼接、嵌套、变量插值都会让 Language Server 失焦,补全立刻消失。
能被识别的写法:
const query = gql`
query GetUser($id: ID!) {
user(id: $id) { name email }
}
`;
不能被识别的写法:
const q = 'query { user { name } }'; const query = gql`${q}`;gql`query { user { ${field} } }`const query = gql`query { user { name } }` + ''; // 行末拼接
若要用在 TS 项目中,还需确保已安装 graphql-tag 并在 tsconfig.json 中配置了类型声明,否则类型推导会断链。
最容易被忽略的是:插件从不报错,它只是沉默地放弃。你看到标红、没补全、跳转失效,90% 是 schema 路径没读到,而不是语法写错了。











