vscode语言专属配色需在settings.json最外层用"[language-id]": {"editor.tokencolorcustomizations": {...}}配置,language-id须与右下角标识完全一致(如[python]、[typescriptreact]),scope须用inspect工具精准获取,否则无效。

直接在 settings.json 里用语言标识符包裹 editor.tokenColorCustomizations 就能生效,但必须确认语言模式正确、scope 精准、且未被第三方主题覆盖——否则改了等于没改。
怎么写语言专属的 colorCustomizations 配置
VSCode 支持按语言单独配色,语法是 "[language-id]": { ... },其中 language-id 必须和当前文件右下角显示的语言标识完全一致(比如 [python]、[typescript]、[vue]),大小写敏感,不能写成 [Python] 或 [ts]。
- 配置必须放在
settings.json的最外层对象中,和"editor.fontSize"同级,不能嵌套在其他字段里 - 每个语言块内只能写它自己的
editor.tokenColorCustomizations,不能写workbench.colorCustomizations - 如果同时写了全局 + 语言专属配置,语言专属会优先覆盖全局规则
- Vue 文件默认 language-id 是
vue,但需装 Volar 扩展;JSX/TSX 要用[javascriptreact]或[typescriptreact]
为什么 Python 字符串变色了,但 TypeScript 的没反应
常见原因是 scope 不匹配。不同语言对同一类语法元素使用的 TextMate scope 差异很大:
- Python 的字符串常用
string.quoted.double.python,而 TypeScript 是string.quoted.double.ts -
keyword在 Python 里可能只管if、for,但interface、type属于keyword.control.ts - 函数名在 JS/TS 中常是
support.function.builtin.js,Python 则可能是support.function.python - 不查 scope 直接抄网上的配置,大概率只在一个语言里生效
务必用 Developer: Inspect Editor Tokens and Scopes 命令,把光标停在目标词上再运行,看右侧面板里列出的完整 scope 链,选最靠前的那个(如 variable.other.readwrite.ts)来配。
多语言混编文件(如 .vue、.astro)怎么精准控制
.vue 文件里有 <script></script>、<template></template>、<style></style> 三块,每块语言不同,scope 也不同:
-
<script lang="ts"></script>内的变量属于variable.other.readwrite.ts,不是variable.other.readwrite.vue -
<template></template>中的指令如v-if属于keyword.control.vue,和 JS 的if完全无关 -
<style scoped></style>里的 CSS 类名是source.css meta.selector.css entity.name.tag.css,别误配成entity.name.class - 建议为这类文件单独建一个语言块:
"[vue]": { "editor.tokenColorCustomizations": { ... } },并在 rules 里按 scope 分段写
真正难的不是写配置,而是判断哪一段代码到底属于哪个 scope、哪个 language-id、是否被 Pylance/TypeScript Server 的语义高亮接管——这些信息不会自动弹出来,得你主动用 Inspect 工具点三次才能看清。漏掉任意一环,颜色就卡在“看起来应该变了但就是没变”的状态。











