vscode无原生“代码块高亮”,实际是三种机制:1.选中区域由editor.selectionbackground控制,需十六进制或带alpha的rgba()值;2.highlight-words插件支持手动触发、多色叠加、跨文件词级高亮,须配置colors、defaultmode等参数;3.color highlight仅识别颜色字面量,不适用于通用代码高亮。

VSCode 本身没有“代码块高亮”这个原生概念,所谓“高亮代码块”,实际是三种互不兼容的机制在各自场景下生效:选中区域、当前行、语法结构。选错方案,配置再细也白搭。
editor.selectionBackground 控制鼠标拖选/双击区域背景色
这是最常被误称为“代码块”的真实对象——就是你手动划出来的那块文本。它和语言、主题无关,纯靠底层渲染控制。
-
editor.selectionBackground是唯一有效字段,必须写进settings.json顶层,不能塞进workbench.colorCustomizations - 值只接受十六进制(如
"#4a90e2")或带 alpha 的rgba()(如"rgba(74, 144, 226, 0.3)"),rgb()和命名色("blue")会被静默忽略 - 改完保存即生效,无需重启;但若同时装了 highlight-words 插件,它的高亮会盖住 selection 背景,此时得关掉插件或调低其透明度
highlight-words 插件实现手动触发的跨文件词级高亮
想让某个变量名(比如 userConfig)在当前文件甚至所有打开文件里统一标亮?highlight-words 是目前唯一稳定支持多色叠加、正则匹配、手动开关的方案。
- 安装后必须显式配置
highlightwords.colors(至少 2 组颜色)、highlightwords.defaultMode(推荐3表示全词+忽略大小写)、highlightwords.box(深色主题下dark: false才能看清边框) - 快捷键需手动绑定:
Ctrl+K Ctrl+S→ 搜Highlight Toggle Current→ 绑定Ctrl+Shift+H(避免和 Prettier/Auto Rename Tag 冲突) - 高亮默认不跨编辑器窗口,也不保留在关闭的标签页里;如果希望长期保留,得配合
highlightwords.showSidebar: true,但它会在资源管理器里多出 HIGHLIGHTS 栏,干扰导航
Color Highlight 插件只对颜色值生效,不是通用代码高亮工具
它不处理变量、函数或关键词,只识别 #ff6b6b、rgb(255, 107, 107)、hsl(12, 100%, 60%) 这类颜色字面量,并在旁边渲染小色块。
- 默认只支持 CSS/SCSS/HTML 中的颜色;JS/TS 字符串里的颜色要手动加
color-highlight.languages规则,例如{"language":"javascript","pattern":"\"#[0-9a-fA-F]{6}\""} - 检查
editor.colorDecorators是否为true,否则所有装饰(包括色块)都会被禁用 - 若色块颜色发灰或透明失效,大概率是插件版本太旧(
#RGBA需 v2.5.0+)或系统色彩配置干扰,换主题或升级插件即可
真正难的是先分清你要高亮的到底是什么
很多人卡在第一步:没意识到“选中一段代码”“光标所在整行”“一个 if 分支的全部内容”在 VSCode 里对应完全不同的底层机制。配 editor.lineHighlightBackground 去解决选区问题,或者用 highlight-words 去试图高亮 CSS 颜色值,注定失败。边界模糊的地方,比如 Vue 单文件组件中的 <style></style> 块,得靠插件组合(Color Highlight + highlight-words),而不是指望单个配置项通吃。











