代码格式化教程：HTML、CSS、JavaScript 一键美化缩进或压缩上线
一句话答案
美化：打开对应的 HTML、CSS 或 JS 格式化工具，粘贴代码，模式选“美化”（JS 可选缩进 2 或 4），复制结果。压缩：模式选“压缩”，去掉空格和注释，JS 还会缩短局部变量名。
网站上线的 CSS、JS 通常压缩成一行，想看懂或调试时需要先“美化”；反过来，自己写的代码上线前要“压缩”，减小体积、加快加载。JS 格式化/压缩、CSS 格式化/压缩、HTML 格式化/压缩 三个工具都在浏览器本地运行，适合处理含内部接口地址的代码。
操作步骤（以 JS 为例）
- 粘贴代码：打开 JS 格式化/压缩，把代码粘贴到输入框。
- 选择操作：“操作”选“美化”或“压缩”；美化时“缩进”可选 2 或 4 个空格。
- 执行：点“执行”，结果显示在下方。
- 复制：点“复制”，粘贴回编辑器。
🟨 JS 格式化/压缩
免费在线使用，文件和数据只在你的浏览器本地处理，无需注册。
三个工具的区别
| 工具 | 美化 | 压缩 |
|---|---|---|
| JS 格式化/压缩 | js-beautify 排版，可选缩进 | Terser 压缩：去空白和注释、缩短局部变量名 |
| CSS 格式化/压缩 | 每条规则一行，支持 @media 嵌套 | 去掉空格、换行、注释和最后一个分号 |
| HTML 格式化/压缩 | 按标签层级缩进 | 去掉标签间空白，保留 script、style、pre 内容 |
压缩效果示例
CSS 压缩前后：
.btn { color: #fff; padding: 8px 16px; }
/* note */
@media (max-width: 600px) { .btn { padding: 4px; } }.btn{color:#fff;padding:8px 16px}@media (max-width:600px){.btn{padding:4px}}JS 压缩时，函数内部的变量 items、s、i 会被改成 t、o、c 这样的短名字，if 语句会被改写成更短的等价表达式，函数名和全局变量保持不变。
注意事项
- 美化不检查语法：代码有错误时会尽量照原样输出，需要找错误位置可以切到“压缩”，Terser 会报告错误；
- 压缩前保留源码：压缩后的代码不适合再修改，务必保留原始文件；
- 依赖函数名的代码：用到 Function.prototype.toString 或函数名的代码，压缩后要再测试一遍。
SQL 语句的美化见 SQL 格式化，JSON 见 JSON 格式化。
常见问题
JS 压缩会改变代码行为吗？
正常情况下不会。Terser 做的是语义等价的优化，例如删除不可达代码、常量折叠和重命名局部变量；依赖函数名的代码压缩后请再测试。
压缩后的代码能还原吗？
可以美化恢复缩进和换行，但被缩短的变量名和删掉的注释无法还原，所以要保留源码。
HTML 压缩会破坏 script 和 pre 里的内容吗？
不会，script、style、pre 中的内容会原样保留。
代码会上传吗？
不会。格式化和压缩都在浏览器本地完成。