VSCode React文件中Emmet自动添加多余属性，求切换方法

方法一：修改Emmet默认模板，固定生成极简标签 #

1. 打开VSCode设置（快捷键Ctrl+,/Cmd+,）
2. 搜索emmet.preferences，点击「编辑 in settings.json」
3. 添加以下配置，重写label和input的默认生成规则：

"emmet.preferences": {
  "html.label": "<label className=\"$1\"></label>",
  "html.input": "<input />"
}

配置生效后，输入lab.my-class会生成<label className="my-class"></label>，输入inp会生成<input />。

方法二：自定义Emmet缩写，实现两种结果切换 #

如果需要在「极简标签」和「带默认属性标签」之间灵活切换，可以自定义专属缩写：

1. 打开settings.json，添加emmet.snippets配置：

"emmet.snippets": {
  "html": {
    "snippets": {
      // 极简版本
      "labn": "<label className=\"$1\"></label>",
      "inpn": "<input />",
      // 带默认属性版本
      "labf": "<label htmlFor=\"$1\" className=\"$2\"></label>",
      "inpf": "<input type=\"text\" name=\"$1\" id=\"$2\" />"
    }
  }
}

2. 使用方式：
   • 输入labn.my-class按TAB → 生成极简label
   • 输入labf按TAB → 生成带htmlFor的label
   • 输入inpn按TAB → 生成极简input
   • 输入inpf按TAB → 生成带默认属性的input

方法三：用VSCode代码片段实现切换 #

1. 打开命令面板（Ctrl+Shift+P/Cmd+Shift+P），输入Configure User Snippets，选择javascriptreact.json
2. 粘贴以下代码片段：

"Minimal Label": {
  "prefix": "labn",
  "body": "<label className=\"$1\"></label>",
  "description": "生成不带htmlFor的label标签"
},
"Full Label": {
  "prefix": "labf",
  "body": "<label htmlFor=\"$1\" className=\"$2\"></label>",
  "description": "生成带htmlFor的label标签"
},
"Minimal Input": {
  "prefix": "inpn",
  "body": "<input />",
  "description": "生成极简input标签"
},
"Full Input": {
  "prefix": "inpf",
  "body": "<input type=\"text\" name=\"$1\" id=\"$2\" />",
  "description": "生成带默认属性的input标签"
}

之后输入对应的前缀（如labn/labf），按TAB即可切换生成结果。

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