vscode默认不识别颜色值和todo注释,必须依赖插件:color highlight需配置languages才能在js/ts中渲染色块;todo highlight须关闭默认样式并显式定义keywords和ignore路径,否则易误标或无效。

VSCode 默认的语法高亮对颜色值、TODO 注释、自定义标记这类内容完全不识别,必须靠插件补足——否则你写的 #3b82f6 和 // TODO: 优化缓存逻辑 就只是普通文本,毫无视觉提示。
Color Highlight:让 CSS/SCSS/JS 中的颜色值真正“亮起来”
它不是简单地给十六进制色值加个底色,而是解析并渲染出对应的实际颜色小方块,直接嵌在代码行内。常见错误是装了但没生效,通常因为语言模式没匹配上。
- 默认只启用
css、scss、less,若你在js或ts里写color: "#ef4444",需手动在设置里添加"colorHighlight.languages": ["javascript", "typescript"] - 不支持
rgb(239, 68, 68)或hsl()等函数式写法,除非开启实验性选项"colorHighlight.customColors": true并配置正则 - 和主题冲突时(比如某些暗色主题下浅色方块看不清),可调
"colorHighlight.foregroundColor"改边框或文字色
Todo Highlight:别再漏掉自己留的 TODO 和 FIXME
它不只是高亮,还能把所有标记集中列在侧边栏,点击直接跳转。但默认规则太宽松,容易误标——比如字符串里出现 "TODO" 也会被染红。
- 务必修改
"todo.highlight.defaultStyle": false,然后用"todo.keywords"显式定义关键词,例如:["TODO", "FIXME", "HACK"] - 加
"todo.ignore": ["node_modules", ".git", "dist"]避免扫描构建产物 - 若项目用
XXX:前缀(如PERF: 减少重绘),需在"todo.regex"里自定义正则,原生不支持
vscode-icons:文件树里的图标比文字更快定位类型
它不改代码高亮,但极大提升导航效率——看到 package.json 图标就知道是配置,看到 index.vue 就知道是 Vue 单文件组件,不用点开确认。
- 安装后需重启 VSCode,且必须启用
"vscode-icons.projectDetection.autoReload": true才能自动识别vue、react、nextjs等项目类型 - 图标显示异常(比如全是文件夹图标)大概率是当前工作区根目录下缺少
package.json或tsconfig.json等特征文件 - 不建议和
Material Theme同时开启图标主题,二者会冲突,优先选vscode-icons的语义化图标
真正关键的不是装多少插件,而是每个插件都得配准——比如 Color Highlight 不设 languages 就对 JS 无效,Todo Highlight 不关默认样式就会满屏红色。这些细节不调,插件等于没装。











