寻求Sublime Text快捷键：将HTML标签内各属性换行排列

嘿，刚好碰到过类似需求！其实不用找第三方工具，主流编辑器都能通过自带的格式化功能+快捷键实现，下面给你说最常用的VS Code和WebStorm的配置方法：

VS Code 方案（最推荐） #

VS Code配合Prettier插件就能完美搞定，步骤超简单：

1. 先装Prettier插件：在扩展商店搜"Prettier - Code formatter"安装，它是前端圈最常用的格式化工具，规则统一。
2. 调整格式化规则：
   • 打开设置（快捷键Ctrl+,），搜索"singleAttributePerLine"，找到Prettier对应的选项勾选上；
   • 或者直接在settings.json里加一行：

     "prettier.singleAttributePerLine": true
     

   这个设置就是让JSX的每个属性单独占一行。
3. 用快捷键触发：
   • 选中你要转换的那行JSX代码（比如<div id="foo" class={bar} />）；
   • 按下Ctrl+K再按Ctrl+F（这是VS Code默认的「格式化选中内容」快捷键），瞬间就变成你想要的格式：

     <div
       id="foo"
       class={bar}
     />
     

   • 如果你想自定义快捷键，可以按Ctrl+K再按Ctrl+S打开键盘设置，搜索"Format Selection"，改成你顺手的组合键就行。

如果不想用Prettier，用VS Code自带的JS/TS格式化也可以，在settings.json里加这些配置：

"javascript.format.enable": true,
"typescript.format.enable": true,
"javascript.format.placeOpenBraceOnNewLineForControlBlocks": true,
"editor.formatOnSave": false

然后同样用「格式化选中内容」的快捷键就行，效果差不多。

WebStorm 方案 #

如果你用WebStorm，操作也很直观：

1. 打开设置（Ctrl+Alt+S），依次找到Editor > Code Style > JavaScript > JSX；
2. 在"Wrap attributes"里选"Always"，再把"Align attributes"设为"On separate lines"；
3. 选中要转换的JSX代码，按下默认格式化快捷键Ctrl+Alt+L，就能得到你要的多行格式了。

这样不管是写React还是Vue的JSX语法，都能快速把挤在一行的属性拆成整齐的多行，超省心！

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