自定义JSX的Emmet缩写：优化布尔属性与空属性输出

这个需求在JSX开发里太常见了——Emmet默认的HTML属性输出规则确实不符合React的布尔属性简写和空对象属性的习惯，不过咱们可以通过修改Emmet的配置来搞定，下面分场景说明：

1. VS Code 配置方法（最常用） #

1. 打开VS Code的设置面板：按下Ctrl+,（Windows/Linux）或者Cmd+,（Mac）。
2. 在搜索框输入「Emmet: Config」，找到「Emmet: Preferences」选项，点击「Edit in settings.json」。
3. 在打开的settings.json中，添加以下配置项：

   "emmet.preferences": {
     "jsx.booleanAttributes": true,
     "jsx.emptyAttributes": "{}"
   }
   

4. 保存配置后，重启VS Code（或者重新加载窗口）生效。

配置项说明： #

• jsx.booleanAttributes: 设为true时，所有空值的属性会自动渲染成React的布尔属性简写形式（比如atrib1而非atrib1=""）。
• jsx.emptyAttributes: 设为"{}"时，空属性会生成atrib1={}的形式，替代默认的atrib1=""。

测试一下：输入div.my-class[atrib1][atrib2]然后按Tab，会生成：

<div className="my-class" atrib1 atrib2></div>

如果输入div.my-class[atrib1]，则会输出：

<div className="my-class" atrib1={}></div>

2. 其他编辑器（如Sublime Text、WebStorm） #

不同编辑器的Emmet配置入口略有不同，但核心配置项一致：

• 找到Emmet的用户配置文件（比如Sublime Text中是Preferences > Package Settings > Emmet > Settings - User）。
• 添加以下配置：

  {
    "preferences": {
      "jsx.booleanAttributes": true,
      "jsx.emptyAttributes": "{}"
    }
  }
  

• 保存配置后重启编辑器即可生效。

补充说明 #

如果需要针对特定属性做差异化处理（比如某些属性用布尔简写，某些用空对象），可以自定义Emmet代码片段或者使用Emmet的过滤器，但上述默认配置已经能覆盖绝大多数日常JSX开发的需求了。

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