在使用WebStorm进行前端开发时，统一的HTML代码格式能大幅提升代码可读性和团队协作效率，默认的格式化规则可能不符合个人或项目的规范要求，这时候就需要手动调整配置。下面为大家详细介绍完整的配置流程。
打开HTML格式化配置入口
首先打开WebStorm，点击顶部菜单栏的File，选择Settings（Windows/Linux系统快捷键为Ctrl+Alt+S，macOS系统为Cmd+,），在弹出的设置窗口左侧导航栏中找到Editor选项，展开后选择Code Style，再点击子选项HTML，即可进入HTML代码格式化的专属配置页面。
常用格式化规则配置项说明
缩进设置
在配置页面的Tabs and Indents标签页，可以调整HTML代码的缩进规则：
- Tab size：设置单个Tab键对应的空格数，通常前端项目建议设置为2或4
- Indent：设置代码缩进时使用的空格数，一般和Tab size保持一致
- Continuation indent：设置换行后继续缩进的空格数，用于长属性或嵌套内容的缩进
- 勾选Use tab character可以使用Tab字符代替空格，不勾选则全部用空格缩进
换行与标签规则
切换到Wrapping and Braces标签页，可以配置标签和内容的换行逻辑：
- Hard wrap at：设置单行代码的最大长度，超过该长度会自动换行
- Wrap attributes：设置标签属性的换行规则，可选择不换行、超过长度换行、每个属性单独换行等选项
- Keep line breaks：勾选后保留手动输入的换行，不会在格式化时自动合并行
- Don't break if inline content：勾选后内联元素的内容不会强制换行
属性排列规则
在Arrangement标签页，可以自定义HTML标签属性的排列顺序，比如可以设置class属性排在最前，id属性次之，其他属性按字母顺序排列，配置完成后点击Apply保存规则即可。
应用格式化规则
配置完成后，在编辑HTML文件时，选中需要格式化的代码，按下快捷键Ctrl+Alt+L（Windows/Linux）或Cmd+Opt+L（macOS），即可按照自定义的规则格式化选中的代码。如果想要格式化整个文件，可以先按Ctrl+A全选内容，再执行格式化快捷键。
如果想要修改格式化快捷键，可以回到Settings页面，选择Keymap，在搜索框输入Reformat Code，右键点击该选项，选择Add Keyboard Shortcut，设置自己习惯的快捷键组合即可。
示例代码验证
下面是一段格式化前的HTML代码，应用我们设置的规则（缩进2空格，属性超过80字符换行，class属性优先）后，会变成规范格式：
<!-- 格式化前的代码 --> <div class="container" id="main" data-type="index" data-param="test" style="width:100%;height:200px;"><p>hello world</p></div> <!-- 格式化后的代码 --> <div class="container" id="main" data-type="index" data-param="test" style="width:100%;height:200px;" > <p>hello world</p> </div>
如果需要将配置的规则导出分享给团队其他成员，可以在HTML Code Style配置页面点击右上角的Export按钮，将规则保存为XML文件，其他成员导入该文件即可同步相同的格式化规则。