如何在PhpStorm/WebStorm中创建CSS规则时自动添加注释

原生IDE设置里确实没有直接针对“新建CSS规则时自动插入注释”的选项，不过可以通过**Live Templates（实时模板）**实现，还能给这个模板绑定快捷键，步骤如下：

一、创建自定义Live Template #

1. 打开IDE的Settings > Editor > Live Templates
2. 点击右侧的+按钮，选择Template Group，新建一个自定义组（比如命名为CSS Custom）
3. 选中刚创建的组，再次点击+，选择Live Template
4. 配置模板：
   • 缩写（Abbreviation）：设置一个易记的缩写，比如cssc
   • 模板文本（Template text）：粘贴以下内容

     $SELECTION$ {
        /* Comment one */
        /* Comment two */
        /* Comment three */
        /* and so on... */
     }
     

   • 点击Define按钮，勾选CSS（如果需要支持SCSS、Less，也可以一并勾选）
   • （可选）点击Edit variables，把SELECTION变量的默认值设为className，这样没选中内容时会自动填充占位符

二、绑定快捷键（可选） #

如果不想每次输入缩写按Tab，可以给这个模板绑定专属快捷键：

1. 打开Settings > Keymap
2. 在搜索框输入刚才设置的模板缩写（比如cssc），找到对应的Live Template项
3. 右键点击该项，选择Add Keyboard Shortcut，设置你习惯的快捷键（比如Ctrl+Shift+C），确认保存即可

之后不管是输入缩写按Tab，还是直接按快捷键，都能快速生成带预设注释的CSS规则；如果提前选中了类名/选择器，模板会自动把选中内容替换到规则的选择器位置。

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