如何在IDE中标记CSS/SCSS选择器为弃用并触发实时提示

方案1：SCSS注释原生识别（最接近你要的JSDoc标注效果） #

主流IDE（VS Code、WebStorm等）的SCSS智能提示插件已原生支持@deprecated注解：

• 直接在待弃用的SCSS选择器上方加注释，和你给出的示例完全一致：

/**
 * @deprecated Please use '.ui-fresh__selector' instead!
 */
.ui-old__selector {
  /* 原有样式 */
}

• VS Code需安装SCSS IntelliSense插件，WebStorm无需额外插件。配置完成后，不管是在HTML文件里引用该类名，还是在其他SCSS文件中继承/调用该选择器，IDE都会实时给该选择器添加删除线标记，hover时展示你写的弃用提示。

方案2：Stylelint规则配置（适合批量管理弃用选择器） #

用Stylelint的stylelint-plugin-deprecate插件实现统一配置：

• 先安装依赖：

npm install stylelint-plugin-deprecate --save-dev

• 在你的.stylelintrc配置文件中添加规则，可批量录入所有弃用选择器和对应提示：

{
  "plugins": ["stylelint-plugin-deprecate"],
  "rules": {
    "deprecate/selectors": [
      {
        "selector": ".ui-old__selector",
        "message": "已弃用，请使用.ui-fresh__selector替代"
      },
      {
        "selector": ".old-*",
        "message": "所有old-*前缀的选择器已弃用"
      }
    ]
  }
}

• 给IDE安装对应Stylelint插件，开启实时检查后，HTML文件中用到弃用选择器时会直接标错，展示你配置的提示信息。

方案3：HTMLHint 直接校验HTML类名 #

如果只需要在HTML中提示，不需要覆盖SCSS引用场景，可以用HTMLHint实现：

• 安装HTMLHint及IDE对应插件
• 在.htmlhintrc中添加规则：

{
  "disallowedClasses": [
    [".ui-old__selector", "请使用.ui-fresh__selector替代"],
    [".old-*", "old前缀的类名已全部弃用"]
  ]
}

配置后打开HTML文件即可看到实时提示。

内容的提问来源于stack exchange，提问作者Tamás Tarján