VSCode 中如何让自定义 CSS 属性在浏览器控制台中显示色块？

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

在浏览器控制台中，自定义 CSS 属性通常会在其名称前面显示一个色块，以便更容易识别和调试。然而，在 VSCode 中，这些色块可能不会显示。以下是解决此问题的方法：

使用 CSS Variable Autocomplete 扩展

安装 CSS Variable Autocomplete 扩展。此扩展将向 VSCode 添加一些功能，包括为自定义 CSS 属性显示色块。

安装扩展

1. 打开 VSCode 并点击左侧边栏中的“扩展”图标。
2. 在搜索栏中输入“CSS Variable”，然后单击 Enter 键。
3. 找到 CSS Variable Autocomplete 扩展并单击“安装”按钮。

配置扩展

安装扩展后，需要对编辑器的设置进行一些更改才能使色块显示。

1. 打开“设置”面板（命令面板：Ctrl+Shift+P -> 设置）。
2. 在搜索栏中输入“css.warnUnknownVariables”。
3. 将此设置的值更改为“style”。
4. 保存设置。

启用色块

完成这些步骤后，自定义 CSS 属性的名称前面现在应该会出现色块。

效果图：

以上就是VSCode 中如何让自定义 CSS 属性在浏览器控制台中显示色块？的详细内容，更多请关注其它相关文章！