GraphQL语法高亮需安装官方维护的GraphQL或GraphQL Syntax Highlighting插件,正确绑定文件扩展名(.graphql/.gql),手动配置JS/TS中gql模板字符串嵌套规则,并区分语法高亮与LSP补全功能。

GraphQL 语法高亮在 Sublime Text 中必须靠插件实现,原生不支持;但配置本身很简单,关键在于选对插件、配对文件扩展名、避免“装了却没生效”的假成功。
装哪个 GraphQL 插件才真正管用?
别搜“GraphQL for VSCode”或名字带“vscode”的包——那是移植失败的残次品。只认准两个稳定维护的:
-
GraphQL(作者 joshbuddy,Package Control 里搜这个名字,不是“GraphQL Syntax”) -
GraphQL Syntax Highlighting(轻量、专注高亮,适合只要颜色不要补全的场景)
装错的典型现象:.graphql 文件右下角仍显示 Plain Text,或者高亮只有注释变色、关键字全灰。重装前先删掉所有名字含 graphql-syntax 或 graphql-sublime 的残留包(Preferences → Package Settings 里能看到已安装列表)。
.graphql 文件不自动高亮?检查这三处
即使插件装对,也常因路径/扩展名/缓存问题失效:
- 确认文件后缀是
.graphql或.gql(不是.graphqls、.gqlx等冷门变体) - 右下角点开语言名 → 选
Open all with current extension as… → GraphQL,强制绑定一次 - 如果刚装完插件,重启 Sublime 或执行
Ctrl+Shift+P→ 输入Reload Syntax Definitions刷新识别规则
常见错误:把 schema 文件命名为 schema.graphqls,而插件默认只认 .graphql,结果整块 SDL 写得再标准也没高亮。
想让 JS/TS 里的 gql 模板字符串也高亮?得手动嵌套
默认情况下,gql`query { user { id } }` 这种写法里的内容仍是纯文本。要启用内联高亮,需编辑插件的语法定义:
scope: source.js
contexts:
gql_template:
- match: 'gql[`\'"]'
push:
- meta_scope: source.graphql.embedded
- match: '[`\'"]'
pop: true这个规则不在默认插件里,得进 Packages/GraphQL/GraphQL.sublime-syntax 手动加(路径可通过 Preferences → Browse Packages… 找到)。改完保存,重启编辑器。否则你写的 query 就算语法全对,在 JS 文件里也像乱码一样没颜色。
高亮有了,但字段补全还是空白?这不是语法插件的事
语法高亮 ≠ 智能补全。后者需要 LSP + LSP-graphql + 正确的 .graphqlconfig,且依赖本地运行的 GraphQL 服务或有效的 schemaPath。如果你只想要颜色,装好 GraphQL 插件就够了;但若看到补全菜单空着、按 Ctrl+Space 没反应,别折腾语法文件——那是 LSP 配置没到位,和高亮完全无关。
真正容易被忽略的是:Sublime 不会主动扫描项目根目录下的 .graphqlconfig 来决定高亮范围,它只看文件后缀和语法定义。所以哪怕你配好了全套 LSP 补全,.js 里没加嵌套规则,gql 字符串照样灰着。










