如何在Visual Studio Code中按缩进层级区分JSON键的颜色

VS Code原生的JSON语法并没有为不同缩进层级的键分配独立的TextMate作用域，所以你当前用的editor.tokenColorCustomizations配置没法直接实现按层级给键设不同颜色的需求。下面给你两种可行的解决办法：

方案1：用第三方扩展快速搞定 #

推荐安装Colorful JSON这个扩展，它专门针对JSON结构做了层级着色处理，安装后不用手动配置任何规则，打开JSON文件就能自动按缩进层级给不同的键分配不同颜色，效果直接能用。

安装步骤很简单：

• 按Ctrl+Shift+X打开扩展面板
• 搜索“Colorful JSON”，点安装
• 重启VS Code后生效

方案2：自定义JSON语法（进阶玩法） #

如果不想用扩展，想完全自己控制颜色规则，可以自定义JSON的语法文件，给不同层级的键添加专属的作用域，再对应配置颜色：

1. 按Ctrl+Shift+P打开命令面板，输入Preferences: Open User Languages Configuration，打开用户语言配置文件夹
2. 编写或修改JSON的语法规则，给不同层级的键添加类似support.type.property-name.json.level-1、support.type.property-name.json.level-2这类带层级标识的作用域（这一步需要懂点TextMate语法编写，你可以参考VS Code官方的语法编写指南）
3. 在settings.json里给这些新作用域分别配置颜色：

"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": "support.type.property-name.json.level-1",
            "settings": {
                "foreground": "#FF0000",
                "fontStyle": "bold"
            }
        },
        {
            "scope": "support.type.property-name.json.level-2",
            "settings": {
                "foreground": "#00FF00",
                "fontStyle": "bold"
            }
        },
        {
            "scope": "support.type.property-name.json.level-3",
            "settings": {
                "foreground": "#0000FF",
                "fontStyle": "bold"
            }
        }
    ]
}

注意：自定义语法有一定门槛，要是只是想快速实现效果，优先用方案1的扩展更省心。

内容的提问来源于stack exchange，提问作者MDan