Better Comments更成熟，支持todo、!、?、*等前缀自动着色及自定义配置；Colorful Comments更轻量，仅识别行首ASCII符号，不支持中文或emoji，二者不可共存以防样式冲突。
VSCode 默认配色对多数人来说不够友好——注释看不清、括号嵌套难分辨、文件类型靠猜，不是代码写得差，是编辑器没“说话”。真正提升可读性，不靠换字体或调亮度，而是让语义信息自动浮现。
注释颜色区分：Better Comments 与 Colorful Comments 怎么选
Better Comments 更成熟，支持 todo、!、?、* 等前缀自动着色，且能通过 settings.json 的 better-comments.tags 扩展自定义；Colorful Comments 更轻量，只识别行首 ASCII 符号（如 ! 这里有风险），但不支持中文符号或 emoji。
- Vue 或 TSX 文件中 Better Comments 不生效？检查插件是否在
parser.js里注册了对应语言的注释符（比如补上case "vue"并设为//） - 两个插件别共存——样式规则冲突会导致部分注释不渲染或颜色错乱
- 团队项目建议把
better-comments.tags配置写进.vscode/settings.json，避免本地设置漂移
括号高亮：用内置功能，别装老插件
VS Code 1.68+ 已原生支持括号配色，无需安装 bracket-pair-colorizer-2 这类旧插件。启用后，每对 ()、[]、{} 会按嵌套层级分配一致颜色，光标停在哪，整对就高亮。
- 必须开启两项配置：
"editor.bracketPairColorization.enabled": true和"editor.guides.highlightActiveBracketPair": true - 如果还装着旧插件，卸载它——否则会出现括号闪烁、颜色断层或高亮失效
- 配色不可自定义，但足够清晰；若想微调，只能改主题的 token color（比如
editorBracketMatch.background）
文件图标与类型识别：vscode-icons 依赖正确关联
vscode-icons 不是“装完就灵”，它靠 VS Code 的 files.associations 判断文件类型。比如 webpack.config.js 默认被识别为 JavaScript，不会显示齿轮图标；而 webpack.config.ts 可能因类型推断不准也漏掉。
- 手动补关联：在
settings.json加"files.associations": { "webpack.config.*": "javascript" }，再重启窗口 - 某些自定义后缀（如
.config.js）需配合files.associations+vscode-icons的扩展名映射规则才能生效 - 图标不显示时，先确认文件是否被正确识别：右下角状态栏点击语言模式，看是否为预期类型（如 “JavaScript” 而非 “Plain Text”）
颜色值实时预览：Color Highlight 比 Colorize 更稳
写 #ff6b6b 或 hsl(200, 100%, 50%) 时，Color Highlight 直接在代码右侧渲染小色块，轻量、无依赖、兼容所有 CSS 变量语法；Colorize 功能更强（支持 var(--primary) 解析），但偶尔在大型文件中卡顿或漏渲染。
- 优先用
Color Highlight：它不解析变量引用，只匹配字面量，稳定性高 - 如果项目重度使用 CSS 自定义属性，再考虑
Colorize，但注意关闭其“实时扫描”选项，改用手动触发 - 两者都不支持内联
style属性里的颜色（如<div style="color: #333">），这是 VS Code 渲染限制，不是插件问题
真正影响可读性的，从来不是“好不好看”，而是“一眼能不能分清这是什么”。插件只是工具，关键在理解每种颜色/图标/高亮背后代表的语义层级——比如括号颜色反映嵌套深度，注释符号暗示作者意图，文件图标暴露职责归属。这些信号一旦形成条件反射，读代码就不再靠扫，而是靠“认”。
