如何在 vscode 中为自定义 css 属性显示色块
在浏览器控制台中，自定义 CSS 属性通常会在其名称前面显示一个色块，以便更容易识别和调试。然而，在 VSCode 中，这些色块可能不会显示。以下是解决此问题的方法：
使用 CSS Variable Autocomplete 扩展
安装 CSS Variable Autocomplete 扩展。此扩展将向 VSCode 添加一些功能，包括为自定义 CSS 属性显示色块。
安装扩展
立即学习“前端免费学习笔记（深入）”；
- 打开 VSCode 并点击左侧边栏中的“扩展”图标。
- 在搜索栏中输入“CSS Variable”，然后单击 Enter 键。
- 找到 CSS Variable Autocomplete 扩展并单击“安装”按钮。
配置扩展
安装扩展后，需要对编辑器的设置进行一些更改才能使色块显示。
- 打开“设置”面板（命令面板：Ctrl+Shift+P -> 设置）。
- 在搜索栏中输入“css.warnUnknownVariables”。
- 将此设置的值更改为“style”。
- 保存设置。
启用色块
完成这些步骤后，自定义 CSS 属性的名称前面现在应该会出现色块。
效果图：
