如何修改VS Code编辑器颜色设置以高亮拼写错误的JavaScript变量名

一、强化未识别变量/函数的视觉提示 #

VS Code中未识别的变量、函数名默认提示不显眼，可通过修改settings.json配置来强化：

1. 打开设置JSON文件：按下Ctrl+Shift+P，输入Open Settings (JSON)并回车。
2. 添加以下配置项：

   // 调整诊断提示的波浪线与背景，提升辨识度
   "workbench.colorCustomizations": {
     "diagnostic.warning.foreground": "#FFA500",
     "diagnostic.warning.border": "#FFA500",
     "diagnostic.warning.background": "rgba(255, 165, 0, 0.1)"
   },
   // 直接修改未识别标识符的文本颜色（需匹配对应语言的语法范围）
   "editor.tokenColorCustomizations": {
     "[Dark+]": { // 替换为你正在使用的主题名称
       "textMateRules": [
         {
           "scope": "variable.undefined", // 通用未识别变量范围，不同语言可细化，如source.js variable.undefined
           "settings": {
             "foreground": "#FF6347"
           }
         }
       ]
     }
   },
   // 让波浪线更醒目
   "editor.squigglyUnderline": "double",
   "editor.lineHeight": 1.5
   

   • 若不确定当前标识符的语法范围，可按下Ctrl+Shift+P输入Inspect Editor Tokens and Scopes，将光标移到未识别的变量上，查看对应的scope值并替换。

二、自定义背景、文本与大括号配色 #

同样在settings.json中添加以下配置，实现黑色背景、白色文本、大括号单独配色：

"workbench.colorCustomizations": {
  "[Dark+]": {
    "editor.background": "#000000",
    "editor.foreground": "#FFFFFF",
    "editorBracket.foreground": "#00FF00" // 可自行替换为你喜欢的颜色，如#00BFFF（蓝色）
  }
},
// 可选：开启括号配对高亮，增强大括号辨识度
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active"

三、验证配置 #

保存settings.json后，VS Code会自动应用修改。若未识别变量的文本颜色未生效，重新检查语法范围scope是否匹配当前语言即可。

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