VS Code代码颜色不对通常因语言模式识别错误，需检查右下角状态栏并手动选择正确语言模式，必要时添加语言注释或配置files.associations。

VS Code 里代码颜色不对，大概率是语言模式没识别对

你看到的 function 是灰色、const 没高亮、字符串和注释颜色一样——不是主题坏了，而是 VS Code 根本没把当前文件当成 JavaScript/Python/TypeScript 来解析。

检查右下角状态栏：那里会显示当前语言模式（比如 Plain Text、JavaScript React、JSON with Comments）。如果显示的是 Plain Text 或 Unknown，颜色就全废了。

• 点击右下角语言名 → 在弹出框里选对的语言（如 JavaScript、TypeScript、Python）
• 如果列表里没有想要的，输入名字搜索，比如搜 tsx 就能选到 TypeScript React
• 临时改完只是本次生效；要永久生效，就在文件顶部加语言注释，比如：

  // @ts-check

  （TS），或在 .vscode/settings.json 里配 "files.associations"

主题本身不控制“语法颜色”，只提供颜色池

很多人以为换主题就能改 if 和 return 的颜色区别，其实不是。主题只定义“关键字”“字符串”“注释”这些语义类别该用什么颜色，真正决定哪段文本属于哪个类别的，是当前启用的 语法高亮扩展（Grammar）。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

• 默认 JS/TS 用的是内置的 typescript.tmx 语法；CSS 用 css.tmLanguage
• 如果你装了 ES7+ React/Redux/React-Native snippets 这类插件，它通常不改高亮逻辑；但装了 Bracket Pair Colorizer 或 Highlight Matching Tag 这类，则可能干扰颜色渲染
• 怀疑语法出问题？按 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（Mac）→ 输入 Developer: Inspect Editor Tokens and Scopes → 点击代码里的某个词，看右边弹窗里 scope 是不是合理（比如 keyword.control.js 而不是 source.js）

自定义某类词的颜色？别硬改主题，用 editor.tokenColorCustomizations

想让所有 console.log 变红、或让 TODO 注释加粗加背景？直接改主题文件太重，也容易被更新覆盖。VS Code 提供了安全可控的注入方式。

• 打开设置（Ctrl+, ）→ 搜 token color → 点击 Edit in settings.json
• 加这段（示例：让数字常量变橙色）：

  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "constant.numeric",
        "settings": {
          "foreground": "#FF9600"
        }
      }
    ]
  }

• scope 值必须来自 Inspect Editor Tokens and Scopes 的输出，不能瞎猜；常见值有 keyword、string、comment、support.function
• 改完保存，不用重启，立刻生效

插件冲突会让颜色突然失效，尤其 ESLint / Prettier / Tailwind 相关

某天打开项目，发现 class 关键字变黑了、JSX 标签没了颜色——大概率是某个插件覆盖了语法作用域。Tailwind CSS IntelliSense、ESLint、Prettier 插件都干过这事。

• 禁用所有插件 → 重启 VS Code → 看颜色是否恢复；再逐个启用，定位罪魁祸首
• Tailwind 插件常见问题：它会劫持 class="..." 里的字符串，导致整个字符串 scope 变成 meta.tag.attributes，从而失去原本的字符串颜色
• ESLint 插件如果启用了 eslint.enable 但项目没配 .eslintrc，有时会降级为纯文本解析
• 确认冲突后，要么在插件设置里关掉“自动注入语法”，要么在 settings.json 中加 "tailwindCSS.experimental.classRegex": [] 类似开关

VS Code 的颜色系统是分层的：文件后缀 → 语言模式 → 语法定义 → 主题映射 → token 自定义。漏掉任何一层，颜色就断链。最常卡在第一步——别急着调主题，先盯死右下角那个小字。