HTML格式化：把挤成一行的代码整理干净

从线上扒下来一个页面，右键查看源代码，整个 body 挤成一行，标签全连在一起，改一个 class 都得眯着眼找。这种时候需要做一次html格式化，把结构重新排开。

VS Code 里一个快捷键

用 VS Code 打开文件，按 Shift+Alt+F，语言模式选 HTML，默认格式化器就能把缩进和换行排好。想统一风格就装 Prettier 插件，在设置里勾选 Format On Save，以后保存自动整理。团队里最好把配置文件一起提交，免得每个人排出来的结果不一样。

命令行批量处理

前端项目常用 npx prettier --write index.html，处理整个目录可以写 npx prettier --write src/**/*.html。老项目没有 Node 环境，用 Python 的 BeautifulSoup 加 prettify() 也能凑合，缺点是属性顺序和空标签的处理不一定合心意。处理前先 git status 确认工作区干净，出问题能一键回退。

格式化会动到的地方

块级元素之间多出的换行通常没影响，但 inline 和 inline-block 元素之间的空白会变成一个空格，几个按钮并排时可能突然多出几像素间隙。pre、textarea 里的内容更要注意，格式化工具可能把缩进塞进去，页面显示就变了。带模板语法的文件，比如 Vue 或 PHP 混排，先确认插件不会把占位符拆坏。格式化只改排版不改语义，diff 里最好只出现空白和换行的变化。

发布前再压回去

整理好的 HTML 上线前一般会压缩，去掉注释和多余空白，减小体积。开发时格式化、发布时压缩，两步分开做，别在服务器上直接改压缩后的文件。

在线工具适合临时处理。临时处理一两个文件，在线格式化网站省事，粘贴进去点一下，复制回来就行。但涉及公司代码、带密钥的配置页，别往在线工具里贴，走本地编辑器或者命令行更稳妥。格式化完用浏览器打开看一遍，结构没乱再提交。