如何在 VSCode 中显示 CSS 自定义属性色块?
如题所示,在浏览器控制台中的 CSS 样式中,变量值前面有一个色块,而在 VSCode 编辑器中却没有。要解决此问题,可以使用 VSCode 扩展。
CSS Variable Autocomplete 扩展可以自动完成 CSS 变量,并在变量值前显示色块。
安装和使用
- 在 VSCode 扩展商店搜索并安装 CSS Variable Autocomplete。
- 重启 VSCode。
- 在 CSS 文件中键入变量名并按 Ctrl+Space,进入自动完成模式。
- 从列表中选择变量值,将自动插入色块。
效果
安装并启用 CSS Variable Autocomplete 扩展后,VSCode 中就会像浏览器控制台一样,在 var 前面显示色块,如下所示:
[图片:VSCode 中的 CSS 变量色块效果]