VSCode中重命名HTML选择器时自动更新SASS选择器的扩展

以下几款扩展可以实现你要的HTML class与CSS/SASS选择器联动重命名功能：

• Rename CSS Class
  专门针对跨文件class重命名的工具。在HTML里选中目标class名（比如main-title），按下F2输入新名称，它会自动遍历项目内的CSS、SASS、LESS等样式文件，同步更新所有对应的选择器。支持SASS嵌套语法，还能自定义扫描范围（比如是否包含子目录、排除特定文件）。

• HTML CSS Support
  这款扩展主打HTML与CSS的联动支持，除了自动补全，也内置了联动重命名功能。右键点击HTML中的class属性值，选择「Rename Symbol」（或直接按F2），就能触发全项目的样式文件扫描，把匹配的选择器批量更新。对SASS的嵌套选择器识别准确，适配大多数项目结构。

• WebStorm-like Rename
  模仿JetBrains系列IDE的重命名逻辑，支持跨文件符号同步修改。选中HTML里的class名后按F2，输入新名称前还能预览所有待修改的文件和位置，确认后一键完成HTML和CSS/SASS的同步更新，适合需要精准控制修改范围的场景。

小提示 #

• 确保项目文件都在VSCode工作区范围内，扩展才能正常扫描关联文件。
• 部分扩展可通过设置调整扫描规则，比如排除第三方样式文件，避免误改。

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