如何在WebStorm中为注释的CSS代码在gutter显示颜色

以主流的VS Code编辑器为例，可通过插件+配置实现注释内颜色值在Gutter（侧边栏）显示对应颜色块：

1. 安装插件
   安装Color Highlight插件，它能识别注释中的十六进制、RGB等颜色值。

2. 配置编辑器设置
   打开VS Code的settings.json（快捷键Ctrl+,后点击右上角的{}图标），添加以下配置：

"editor.colorDecorators": true,
"color-highlight.matchWords": true,
"color-highlight.gutterIcon": true,
"color-highlight.gutterIconSize": "contain"

各配置作用：

• editor.colorDecorators：启用编辑器的颜色装饰功能
• color-highlight.matchWords：允许插件匹配注释中的颜色值文本
• color-highlight.gutterIcon：开启在Gutter显示颜色块的功能
• color-highlight.gutterIconSize：控制Gutter中颜色块的显示尺寸

如果使用Sublime Text编辑器，可安装Color Highlighter插件，在插件设置中开启show_in_gutter选项即可实现相同效果。

内容的提问来源于stack exchange，提问作者Sunil Kumar Das