VSCode中如何区分全局/模块变量与局部变量的语法高亮？

可以通过自定义主题颜色配置实现，具体操作步骤如下：

• 打开VSCode设置界面：按下Ctrl+,（Windows/Linux）或Cmd+,（Mac）。
• 在设置搜索框输入workbench.colorCustomizations，点击编辑 in settings.json。
• 在settings.json中添加针对不同变量作用域的颜色配置，示例代码如下：

  "workbench.colorCustomizations": {
    "[Dark Modern]": {
      "editor.tokenColorCustomizations": {
        "textMateRules": [
          // 全局/模块级let变量
          {
            "scope": "variable.other.readwrite.global",
            "settings": {
              "foreground": "#FFD700"
            }
          },
          // 全局/模块级const变量
          {
            "scope": "variable.other.constant.global",
            "settings": {
              "foreground": "#ADFF2F"
            }
          },
          // 函数内局部let变量
          {
            "scope": "variable.other.readwrite.local",
            "settings": {
              "foreground": "#87CEEB"
            }
          },
          // 函数内局部const变量
          {
            "scope": "variable.other.constant.local",
            "settings": {
              "foreground": "#FFB6C1"
            }
          }
        ]
      }
    }
  }
  

• 保存settings.json后，VSCode会自动应用新的高亮配置。

补充说明 #

• 不同编程语言的TextMate作用域可能存在差异，比如JS/TS的全局变量作用域可能是variable.other.global.js或variable.other.global.ts。如果配置不生效，可通过Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）打开命令面板，输入Developer: Inspect Editor Tokens and Scopes，鼠标悬停在目标变量上查看具体作用域，再调整配置中的scope值。
• 颜色值可根据个人喜好替换为任意十六进制颜色码。

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