Visual Studio Code中Div类侧边颜色显示扩展及设置方法咨询

实现该侧边颜色显示效果可以使用 VS Code 的 Class Color Highlight 扩展，如果你使用 Tailwind CSS 框架，安装 Tailwind CSS IntelliSense 扩展也可以自带同类功能，无需额外配置即可自动识别类名对应颜色并在侧边展示。

具体设置步骤如下：

• 打开 VS Code 扩展面板，搜索对应扩展名称完成安装，安装后重启编辑器生效。
• 若使用 Class Color Highlight 适配自定义类名规则，可打开编辑器 settings.json 配置文件，添加如下规则即可自动匹配类名对应的颜色：

"classColorHighlight.rules": [
  // 示例规则：匹配bg-、text-开头的类名，提取类名后缀作为显示颜色
  {
    "classRegex": "^bg-(.+)$",
    "color": "$1"
  },
  {
    "classRegex": "^text-(.+)$",
    "color": "$1"
  }
]

• 配置保存后，打开包含div标签的HTML文件，即可在对应类名的左侧看到匹配的颜色条。

内容的提问来源于stack exchange，提问作者Omar N