如何实现继承父类的HTML类Emmet代码片段？助力SCSS嵌套

方案一：VS Code 用户代码片段 #

你之前的代码片段正则逻辑有问题，替换成下面的代码，放到VS Code的用户代码片段里（通过Ctrl+Shift+P打开命令面板，输入「配置用户代码片段」，选择html.json即可）：

{
  "带父类前缀的子元素": {
    "prefix": "&",
    "body": [
      "<div class=\"${TM_CURRENT_LINE/^\\.(.*?)&(__.*)$/${1}${2}/}\">$0</div>"
    ],
    "description": "生成带父类前缀的子元素类"
  }
}

使用步骤 #

1. 先输入父类名，比如 .parent
2. 接着输入 &__child
3. 按下Tab键触发代码片段，自动生成 <div class="parent__child"></div>

方案二：Emmet原生SCSS嵌套支持 #

如果是在SCSS嵌套开发中写样式，Emmet本身原生支持用&引用父选择器，无需额外配置：

.parent {
  &__child {
    // 这里写子元素样式
  }
}

编译后会自动生成 .parent__child 的样式规则，完美适配你的嵌套开发需求。

原代码片段失效原因 #

你之前的正则表达式过于复杂，且变量替换语法不符合VS Code代码片段的规则，比如${2:+-${2:substr(1)}}这种写法无法被正确解析，导致没法提取父类和子类的前缀部分。

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