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

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

如何在 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 自定义属性色块?的详细内容,更多请关注其它相关文章!