程序开发 · 2025年1月3日

如何在 VSCode 中显示 CSS 自定义属性色块?

如何在 中显示 自定义属性色块?

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

CSS Variable Autocomplete

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

安装和使用

立即学习“”;

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

效果

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

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

以上就是如何在 VSCode 中显示 CSS 自定义属性色块?的详细内容,更多请关注GTHOST其它相关文章!