VS Code + Prettier 是最省心的组合：覆盖 HTML、CSS、JS，开箱即用，支持语义缩进、双引号、自闭合标签及嵌套错误修复；需启用 formatOnSave 并避免与内置格式化冲突。
VS Code + Prettier 是最省心的组合
绝大多数前端项目用 VS Code 开发，Pretterr 插件能覆盖 HTML、CSS、JS 三类文件，且开箱即用。它默认按语义层级缩进、强制双引号、自动闭合自闭合标签（如 <img> → <img />），还能识别并修复常见嵌套错误（比如 <p> 里套 <div>）。
实操建议：
- 安装
Prettier - Code formatter后无需额外配置即可生效；若需统一团队规则，建一个.prettierrc文件，写入{"singleQuote": false, "tabWidth": 2} - 务必在设置里启用
editor.formatOnSave，否则容易漏掉格式化步骤 - 避免同时启用 VS Code 内置 HTML 格式化和 Prettier —— 二者冲突会导致缩进错乱或属性顺序反复颠倒
tidy 命令行适合批量处理与 CI 流程
tidy 不是编辑器插件，而是独立命令行工具，优势在于可脚本化、无 GUI 依赖、能修复语法错误（比如缺失闭合标签、属性值未引号包裹），特别适合部署前校验或老旧 HTML 文件批量清洗。
常见问题与参数选择：
立即学习“前端免费学习笔记（深入）”；
-
tidy -indent -wrap 0 -modify input.html：这是最常用组合，但注意-wrap 0会禁用换行，长属性可能挤成一行；若需控制行宽，改用-wrap 100 - 遇到中文乱码，加
-utf8参数；否则tidy默认按 Latin-1 解析，导致中文属性值被截断 - 某些老项目含非标准标签（如
<font>），tidy默认会警告甚至删除，需配合-f errors.log查看具体报错再决定是否忽略
BeautifulSoup 适合需要解析后操作的场景
如果你不只是“美化”，还要提取内容、修改节点、插入新结构，BeautifulSoup 的 prettify() 是更底层的选择。它基于真实 DOM 解析，能容忍语法错误，并输出结构清晰的缩进代码。
但要注意：
-
soup.prettify()默认用 2 空格缩进，不支持自定义缩进宽度；若需 4 空格，得手动传参：soup.prettify(indent_width=4) - 它会重排属性顺序（按字母序），可能破坏某些依赖特定顺序的 JS 行为（比如
v-if和v-for在 Vue 模板中位置敏感） - 原始注释会被保留，但格式化后位置可能偏移 —— 若注释用于构建工具标记（如
<!-- build:js -->），需人工核对
格式化不是万能的，语义和结构得靠人把关
所有自动化工具都只处理“怎么写”，不解决“该不该这么写”。比如 <div class="card"><div class="card-title">.../div> 被格式化得再整齐，也掩盖不了语义缺失的问题。
真正影响长期维护质量的点往往藏在自动化之外：
- 是否用
<header>替代<div class="header">？格式化工具不会帮你改 - class 名是否遵循
kebab-case？Prettier 不检查命名，只管引号和空格 - 逻辑区块之间有没有空行分隔？
prettify()和tidy默认不加空行，得靠配置或人工补
格式化只是起点，不是终点。工具越顺手，越容易忽略结构设计本身 —— 这恰恰是最难自动化、也最值得花时间的地方。
