indent-rainbow通过为每级缩进添加不同颜色的垂直色带，直观标识Python的def块、JS的function或{}块、Vue的template/script等模块嵌套边界；需配置languages限定启用语言、indentUnit匹配tabSize、colors数组定义层级色彩，并统一insertSpaces和tabSize以避免混用导致错位。
VSCode 本身不内置模块级颜色区分功能，但通过组合使用 indent-rainbow、color-highlight 和语义化注释插件（如 colorful-comments），可以实现“视觉上按模块着色”的效果——关键不是给整个模块染色，而是让模块边界、作用域和关键标记更易识别。
indent-rainbow 怎么帮你看清模块嵌套边界
它不识别“模块”，但能用颜色标出缩进层级。对 Python 的 def 块、JS 的 function 或 {} 块、Vue 的 <template>/<script> 区域，只要靠缩进来组织结构，indent-rainbow 就能让每层缩进带不同色条。
- 默认只对空格/制表符缩进生效，若项目混用 tab 和 space，需统一设置
"editor.insertSpaces": true和"editor.tabSize": 2（或 4） - 颜色数组长度决定最多支持几层嵌套，例如
"indentRainbow.colors": ["#e06c75", "#98c379", "#61afef"]只渲染前 3 层，更深的层级会循环使用第一个色 - 在
settings.json中加"indentRainbow.languages": ["javascript", "python", "vue"]，避免在 JSON、Markdown 等无缩进语义的文件里干扰视线
color-highlight 让模块内关键颜色值自解释
当你在 CSS 模块、Vue 组件的 <style> 或主题配置文件里写 --primary: #4ecdc4，color-highlight 不仅渲染色块，还能配合 CSS 变量引用链辅助定位模块范围。
- 默认不识别
var(--xxx)，需手动在colorHighlight.colors中添加规则：{"pattern": "var\(--[a-z-]+\)", "color": "var(--primary)"}（注意反斜杠转义） - 若模块用 SCSS
@mixin或$color-primary，该插件无法识别，得靠命名约定 + 注释标记（见下一条） - 开启
"colorHighlight.showColorsInComment": true后，像// bg: #ff6b6b这类注释也会渲染色块，适合临时标注模块配色意图
colorful-comments 把注释变成模块分隔线
它不染代码，但用符号+颜色把注释变成视觉锚点。比如在 Vue 组件顶部写 /*^ Header Module */，colorful-comments 会把它渲染成亮黄色横线，比普通灰色注释醒目得多。
- 符号映射固定：
^→ 黄色，*→ 绿色，!→ 红色（警告模块），~→ 紫色（实验性模块） - 不支持正则匹配，只认行首符号；若注释写成
// ^ Header Module，必须确保插件配置里启用了//类型（默认已开） - 和
indent-rainbow配合效果最好：黄色^注释 + 下方红色缩进条 = 一眼锁定新模块起点
真正难的是跨文件模块（比如一个 API service 拆在多个 .ts 文件里），这类逻辑边界 VSCode 插件目前无法自动染色——你得靠文件夹命名、工作区颜色（peacock）、或自定义文件图标（vscode-icons）来补足。别指望单个插件包打天下，颜色只是线索，不是真相。
