VSCode中如何拆分单行HTML img标签代码？求快捷键方法

你可以通过VSCode自带的代码格式化功能实现这个需求，具体操作如下：

一、直接使用快捷键格式化 #

1. 选中需要处理的单行img标签代码（或者直接对整个HTML文件操作）
2. 根据操作系统按下对应快捷键：
   • Windows/Linux：Shift + Alt + F
   • Mac：Shift + Option + F

如果只想格式化选中的部分代码，可使用：

• Windows/Linux：Ctrl + K 松开后再按 Ctrl + F
• Mac：Cmd + K 松开后再按 Cmd + F

二、调整格式化规则匹配目标格式 #

如果默认格式化后的效果和你想要的不一致，可调整VSCode的HTML格式化设置：

1. 打开设置面板（快捷键：Windows/Linux为Ctrl + ,，Mac为Cmd + ,）
2. 搜索html.format.wrapAttributes，将其设置为force-aligned（该选项会让每个属性单独换行且缩进对齐，完全匹配你要的格式）
3. 可选：调整html.format.wrapLineLength为一个较小的数值（比如20），确保单行标签会被强制拆分

示例对比 #

原始单行代码：

<img src="images/triceratops_4584837.png" height="60" alt="">

格式化后的目标多行格式：

<img 
  src="images/triceratops_4584837.png" 
  height="60" 
  alt=""
>

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