VSCode 打开 Grafana dashboard.json 默认无语法高亮,因其含非标准字段、注释和尾逗号,触发 VSCode 严格 JSON 模式退化;应手动或通过 files.associations 关联为内置 jsonc(JSON with Comments)语言模式。

为什么Grafana JSON文件默认没有语法高亮
VSCode 打开 dashboard.json 时显示为 Plain Text,不是你配置错了,是它根本没识别成 JSON —— 因为 Grafana 的 dashboard 文件虽然结构是 JSON,但实际包含大量非标准字段(如 __inputs、templating、panels 嵌套结构)、注释占位符(如 "// description": "xxx"),甚至部分版本允许 trailing commas。VSCode 内置的 JSON 语言模式严格遵循 RFC 8259,遇到这些就直接放弃高亮,退化为纯文本。
必须用 JSON with Comments 模式而非纯 JSON
解决办法不是“装个 Grafana 插件”,而是切换到支持注释的 JSON 解析器:
- 打开 dashboard.json 文件,点击右下角语言标识(通常是
JSON或Plain Text) - 输入
JSON with Comments并回车(注意大小写和空格,必须完全匹配) - 此时高亮会立刻恢复:字符串、数字、布尔值、
null、键名都会着色,且允许//和/* */注释
这个模式是 VSCode 内置的(ID 是 jsonc),不依赖扩展,也不需要改 files.associations —— 但别手误选成 JSON(它不认注释)或 JSONC(大小写错误无效)。
如何让所有 dashboard.json 自动用 JSON with Comments
手动切语言太麻烦,尤其当你有 dashboards/ 目录下几十个文件时。在 settings.json 中加精准关联规则:
"files.associations": {
"**/dashboards/**/*.json": "jsonc",
"**/dashboard*.json": "jsonc",
"dashboard.json": "jsonc"
}
关键点:
- 用
**/dashboards/**/*.json覆盖子目录,但别写**/*.json——否则package.json、tsconfig.json全部错乱 -
jsonc是语言 ID,不是文件后缀,不能写成"*.json": "jsonc"(VSCode 1.85+ 已禁用通配符全局绑定) - 如果项目里混用标准 JSON(如
schema.json),建议把 Grafana 文件统一放到grafana/dashboards/下再配路径,避免冲突
高亮了但 $variables 还是白色?这不是 bug
Grafana dashboard JSON 里的变量引用(如 "datasource": "${DS_PROMETHEUS}"、"targets": [{ "expr": "rate(http_requests_total[5m])" }])不会被高亮,因为:
-
jsonc模式只做词法分析,不解析字段语义——它不知道expr里该是 PromQL,datasource里该是变量模板 - 目前没有任何 VSCode 扩展能真正理解 Grafana JSON 的 schema 并做上下文感知高亮(不像 Terraform 或 Kubernetes YAML 那样有成熟 Language Server)
- 如果你真需要 PromQL 高亮,得另开一个
.promql文件写表达式,再复制过去;或者用grafana-toolkitCLI 预编译,但这已超出编辑器配置范畴
所以,能稳定显示 JSON 结构、允许注释、不报红,就是当前最务实的“高亮”——别在 scope 名上死磕,jsonc 就是终点。


















