editor.colordecorators 必须为 true，否则所有颜色预览（包括 css 中的 hex、rgb、hsl 等）都不会显示——这不是插件问题，而是 vscode 底层开关没开。
editor.colorDecorators 必须为 true，否则所有颜色预览（包括 CSS 中的 HEX、RGB、HSL 等）都不会显示——这不是插件问题，而是 VSCode 底层开关没开。
为什么开了 Color Highlight 插件却没色块？
Color Highlight 是增强型渲染器，但它依赖 VSCode 原生的 colorDecorators 机制。这个机制一旦被关掉，哪怕插件装了、启用了、语言也配对了，色块照样不出现。
- 按
Cmd + ,（macOS）或Ctrl + ,（Windows/Linux）打开设置 - 搜索
colorDecorators.enabled - 确保复选框已勾选；若为灰色不可点，说明被工作区设置覆盖，需手动在
settings.json中添加："editor.colorDecorators": true
- 保存后，重新打开当前 CSS 文件（或切换到其他标签再切回），触发重载
CSS 里写对了 #fff 却没预览？检查语言模式和上下文
VSCode 不会扫描任意文本中的颜色值，只在被识别为 CSS（或 SCSS、Less、Vue SFC 的 <style></style> 等）且语法合法的位置生效。
- 右下角状态栏确认语言模式是
css，不是plaintext或javascript - 在
.vue文件中，<style scoped></style>块默认支持，但若用的是lang="scss"，需确保colorHighlight.languages包含scss和vue - 内联样式如
style="color: #3a86ff;"属于 HTML 上下文，需在colorHighlight.languages中启用html - 变量写法如
color: var(--primary);默认不渲染，Color Highlight 需额外开启colorHighlight.variables（设为true）
怎么让色块更明显或调整位置？
Color Highlight 的默认尺寸偏小，尤其在高 DPI 屏幕或缩放比例 >100% 时容易忽略。修改 settings.json 可直接控制视觉反馈强度：
-
"colorHighlight.size": 18（默认是 16，建议 16–20 之间） -
"colorHighlight.position": "right"（可选left/both；both在长行中易遮挡文字） -
"colorHighlight.border": false（去边框更简洁；设为true可提升低对比度主题下的辨识度） -
"colorHighlight.opacity": 0.95（默认 1，略降一点可避免盖住背景色过重）
别装“颜色选择器”类插件
VSCode 原生就带颜色拾取功能：光标停在合法颜色值上，按 Cmd + Shift + P → 输入 Pick Color 即可调出调色盘。装第三方“颜色选择器”扩展反而可能劫持 colorDecorators 渲染链，导致预览失效或点击无响应。
真正容易被忽略的是：这个功能只在 editor.colorDecorators: true 且语言模式正确时才激活——它不依赖任何插件，也不需要额外配置，但一旦底层开关关闭，连原生调色盘都点不出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
