vscode 默认支持颜色预览，需确保 editor.colordecorators 启用、文件语言模式为 css/scss/less/postcss，且颜色为静态字面量（如 rgb(255, 0, 0)），变量（如 var(--primary)）和非标准写法不支持。
VSCode 默认就能预览颜色代码效果，不需要装插件——但前提是 editor.colorDecorators 没被关掉，且你写的颜色是它认得的格式。
为什么颜色值旁边没小色块？先查 editor.colorDecorators
这个设置控制所有颜色装饰器（包括色块、悬停信息、点击调色器）是否启用。它默认开，但容易被工作区设置、远程连接或某些扩展悄悄关掉。
- 按
Cmd+,（macOS）或Ctrl+,（Windows/Linux）打开设置，搜colorDecorators - 确认
Editor > Color Decorators已勾选；若灰显，说明被.vscode/settings.json覆盖，点“在 settings.json 中编辑”，手动加："editor.colorDecorators": true
- 改完不用重启，但建议关闭再重开当前文件，避免缓存延迟
var(--primary) 和 rgb(255, 0, 0) 都不显示？检查语言模式和格式支持
VSCode 原生只对静态颜色字面量做预览，且只在识别为 CSS/SCSS/Less/PostCSS 的文件中生效。不是所有带“颜色”字样的写法都会触发。
- 右下角状态栏看语言模式：如果是
plaintext或html（非css），点它手动切到css或scss -
var(--primary)永远不会出预览色块——VSCode 不解析 CSS 变量，也不读取:root定义；想验证变量值，用Ctrl+ 点击跳转（靠CSS Peek这类插件） -
rgb()、hsl()、rgba()是支持的，但必须写法规范：空格、括号、逗号不能错，比如rgb(255,0,0)少空格也可能失败 -
.vue文件里<style></style>块不显示？大概率语言模式没识别成css或scss，右下角点一下切过去
点了色块没反应？不是 bug，是操作或环境限制
点击色块呼出内置调色器是原生功能，但有明确前提：颜色必须可解析、鼠标左键单击、无插件劫持事件。
- 仅对已渲染出色块的颜色有效——
transparent、currentColor、inherit这些值本身就不生成色块，点也没用 - 某些插件（如旧版
Auto Rename Tag、Polacode）会拦截点击事件，导致调色器打不开；用code --disable-extensions启动测试，恢复后再逐个启用排查 - 按住
Alt再点击色块，可批量高亮并编辑同一颜色的所有出现位置——这个功能常被忽略，但对统一主题色特别实用 - 调色器里可直接切换 HEX/RGB/HSL 格式，改完回车就自动替换源码，不用手动誊写
真正容易卡住的地方不是“怎么开”，而是“开了之后为什么还不行”——语言模式错、变量当字面量用、插件静默干扰，这三类问题占了失效案例的九成。别急着重装，先低头看右下角和设置里的两个开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
