color highlight在js/ts字符串中不生效,需同时配置colorhighlight.languages(含javascript/typescript)和正则pattern(覆盖单双引号及3-8位十六进制)。

highlight-words 的颜色配置必须用对象数组,不是字符串列表
很多人复制别人配置时直接把 highlightwords.colors 写成 ["#ff0000", "#00ff00"],结果高亮失效——这个字段只接受对象数组,每个对象必须同时提供 light 和 dark 两种模式下的颜色值。
- 正确写法:
{"light": "#FFD700", "dark": "#FFA500"},缺一个就整个数组被忽略 - rgba/hsla 格式更安全,比如
"rgba(255, 215, 0, 0.6)"能避免遮挡语法高亮 - 超过 12 种颜色会拖慢渲染,尤其在大文件里滚动时明显卡顿
- 别把
highlightwords.box设为true后再加太多颜色,边框叠加会让文本区域变“毛刺”
Color Highlight 在 JS/TS 字符串里不生效?检查 language + pattern 双配置
默认情况下,color-highlight 只处理 CSS/SCSS 文件里的颜色字面量。想让它识别 const color = "#42b883" 这类 JS 字符串,光改 color-highlight.languages 不够,还得配正则。
-
color-highlight.languages必须显式包含"javascript"或"typescript" - pattern 要覆盖单双引号:
"\"#[0-9a-fA-F]{3,8}\"|'#[0-9a-fA-F]{3,8}'",漏掉一种引号就漏匹配 - hex 8 位(#rrggbbaa)需要插件 v2.5.0+,旧版本只认 3/6 位
- 如果用了模板字符串(
`bg: ${theme.primary}`),pattern 无法捕获,这种得靠类型系统或 lint 规则
Todo Tree 扫描范围失控?用 includeGlobs + scanWholeFile 控制代价
todo-tree 默认只扫注释,但一旦开了 todo-tree.general.scanWholeFile,它就会逐行解析整个文件内容——这对 package.json 或 README.md 是刚需,对 node_modules 就是灾难。
-
todo-tree.filtering.includeGlobs必须精确限定路径,比如["**/*.ts", "**/*.vue"],别写["**/*"] - 加
!**/node_modules/**到 glob 里没用,这个插件不支持排除语法,只能靠 include 显式白名单 - Vue 单文件组件里
<template></template>区域的// TODO默认不识别,得开scanWholeFile,但性能下降约 40% -
todo-tree.general.tags支持小写(如"todo"),但大小写混用时建议统一写法,避免漏匹配
Volar 高亮失效?语言模式和 takeOverMode 缺一不可
Volar 的语法高亮和语义高亮是两套机制。即使 Vue 文件后缀正确,如果语言模式不是 vue,或者 volar.takeOverMode 关着,<script setup></script> 里的响应式变量就不会有专属颜色。
- 按
Ctrl+Shift+P→Change Language Mode,确认右下角显示的是Vue,不是HTML或Plain Text -
volar.takeOverMode必须设为true,否则 Volar 只做基础语法,不接管 TypeScript 类型推导和 ref 响应式标记 - 如果用了
unplugin-vue-components自动导入,Volar 的组件名高亮可能延迟 1–2 秒,这是正常行为,不是配置问题 -
editor.tokenColorCustomizations对 Volar 无效——它只影响 VSCode 原生语法作用域,Volar 的高亮走的是 LSP 通道
settings.json 的加载顺序和拼写精度。少一个逗号、多一个空格、大小写错位(比如 todoTree 写成 todo-tree),整段配置就静默失效。调试时别猜,直接打开命令面板运行 Developer: Toggle Developer Tools,看 Console 有没有插件初始化报错。











