如何在 vscode 中显示 css 自定义属性色块？

如题所示，在浏览器控制台中的 CSS 样式中，变量值前面有一个色块，而在 VSCode 编辑器中却没有。要解决此问题，可以使用 VSCode 扩展。

CSS Variable Autocomplete

CSS Variable Autocomplete 扩展可以自动完成 CSS 变量，并在变量值前显示色块。

安装和使用

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

立即学习“前端免费学习笔记（深入）”；

1. 在 VSCode 扩展商店搜索并安装 CSS Variable Autocomplete。
2. 重启 VSCode。
3. 在 CSS 文件中键入变量名并按 Ctrl+Space，进入自动完成模式。
4. 从列表中选择变量值，将自动插入色块。

效果

安装并启用 CSS Variable Autocomplete 扩展后，VSCode 中就会像浏览器控制台一样，在 var 前面显示色块，如下所示：

[图片：VSCode 中的 CSS 变量色块效果]