跳至内容
🛠️
Whiz Tools

免费代码格式化工具：美化JavaScript、Python、HTML等

代码格式化工具可为JavaScript、Python、HTML、CSS、Java、C++、JSON、XML等十二种以上编程语言的代码自动添加正确的缩进和间距，将杂乱压缩的代码整理为整洁易读的格式。全部处理均在浏览器本地完成，代码不会上传到任何服务器，安全、免费且无需注册账号，适合开发者日常代码整理和风格统一使用。

代码格式化工具

一键格式化您的代码。选择语言，粘贴代码，即可获得格式规范的结果。

使用方法：

  1. 从下拉菜单中选择编程语言。
  2. 将未格式化的代码粘贴到输入区域。
  3. 点击“格式化代码”按钮。
  4. 从输出区域复制格式化结果。
加载计算器...
📚

文档

什么是代码格式化工具？

代码格式化工具会在不改变代码功能的情况下，使用一致的缩进、换行和空格重写源代码。此代码格式化工具在网页浏览器中运行，支持 12 种编程语言，包括 JavaScript、Python、HTML 和 CSS。

此代码格式化工具如何工作

该工具为每种语言使用不同的规则。除 JSON 外，这些规则都不会为代码构建完整的解析树。

  • JSON 先用浏览器内置的 JSON 解析器解析，再以两个空格缩进重新输出。如果 JSON 无效，工具会报告错误，并且不显示输出。
  • JavaScript、TypeScript、Java、C、C++ 和 C# 共用一种格式化器。它逐字符扫描代码，跟踪花括号、圆括号和分号。每个 { 都会开始一个新的缩进代码块，每个 } 或 ; 都会结束一行。注释和带引号的字符串会原样复制，不作修改。此格式化器不会为原代码中缺少的运算符两侧空格或逗号后空格补加空格；它只重新构建换行和缩进。
  • Python 会读取每一行现有的缩进，并按每级四个空格重新构建，遵循的是 Python 语言本身使用的嵌套规则。它不会拆分长行、增加空行，也不会在运算符周围添加空格；它只调整每一行的缩进深度。
  • CSS 会移除多余的换行和空白，然后在每个 { 和 ; 后换行，并在每个 } 前换行。
  • HTML 和 XML 会为每层嵌套标签添加换行和两个空格的缩进，并识别 <br>、<img> 和 <input> 等标准自闭合标签。
  • SQL 会将固定的一组关键字（如 SELECT、FROM、WHERE、JOIN 和 ORDER BY）转换为大写，并在每个主要子句前换行。

由于只有 JSON 处理路径会实际解析输入，其他格式化器都不会检测缺少括号或字符串未闭合等语法错误。无论输入的文本是否能够运行，它们都会对其重新格式化。

支持的语言

语言常见文件扩展名缩进宽度
JavaScript.js2 个空格
TypeScript.ts2 个空格
HTML.html2 个空格
CSS.css2 个空格
Python.py4 个空格
Java.java4 个空格
C.c4 个空格
C++.cpp4 个空格
C#.cs4 个空格
SQL.sql按子句换行
JSON.json2 个空格
XML.xml2 个空格

如何格式化代码

  1. 从下拉菜单中选择一种编程语言。
  2. 将未格式化的代码粘贴到输入框中。
  3. 选择“格式化代码”。
  4. 从输出框中复制格式化后的结果。

格式化完全在浏览器内部进行。代码不会发送到服务器。

JavaScript 格式化示例

格式化前：

1function add(a, b) {
2    if (a > 0) { return a + b; }
3    return 0;
4}
5

格式化后：

1function add(a, b) {
2  if (a > 0) {
3    return a + b;
4  }
5  return 0;
6}
7

格式化器将 { } 内的代码移到单独的缩进行，并将每级缩进规范为两个空格。它保留了 a > 0 和 a + b 周围原有的空格，因为这些空格本来就存在。

Python 格式化示例

格式化前：

1def calculate_average(numbers):
2  if len(numbers) == 0:
3    return 0
4  total = sum(numbers)
5  return total / len(numbers)
6

格式化后：

1def calculate_average(numbers):
2    if len(numbers) == 0:
3        return 0
4    total = sum(numbers)
5    return total / len(numbers)
6

原始代码每级缩进使用两个空格。格式化工具按每级四个空格重新构建了每一行的缩进，与 Python 官方风格指南 PEP 8 中每级缩进四个空格的规定一致。每一行的顺序保持不变，行内的空格也没有改动。

为什么代码格式化很重要

不一致的缩进会让人难以看出函数、循环或条件语句在哪里结束。经过多人编辑的代码常常会混用制表符和空格缩进，或者某些行无法与其所属代码块对齐。使用格式化器处理后，每个文件都会具有相同的视觉结构，从而更快地浏览代码，也更容易发现位置错误的括号。

局限性

  • 输入大小：该工具最多接受 50,000 个代码字符。超过此长度的输入会在格式化开始前被拒绝，并显示错误消息。
  • 大多数语言不进行语法检查：只有 JSON 输入会被解析和验证。其他 11 种语言的代码会按原样重新格式化，即使其中缺少括号或字符串未闭合。在这种情况下，输出可能只是缩进错误，而不会被标记为错误。
  • 不会调整运算符周围的空格：JavaScript、TypeScript 和 C 系列语言的格式化器只会重新排列换行和缩进。如果原本没有空格，它们不会在 +、=、!== 周围或逗号后插入空格。
  • 不支持 PHP：选择不受支持的语言时，代码会保持不变返回。

常见问题

这个工具会检查我的代码有没有语法错误吗？ 只检查 JSON。JSON 输入会被解析，所以无效的 JSON 会产生错误提示。其他支持的语言的代码只会被重新格式化，不会检查语法是否有效。

它会把我的代码发送到服务器吗？ 不会。格式化完全在浏览器中通过 JavaScript 运行。代码不会被上传，也不会存储在任何地方。

它最多可以格式化多少代码？ 50,000 个字符。粘贴的内容超过这个数量时，会在格式化开始前产生错误。

它会在我的运算符周围或逗号后面补上缺失的空格吗？ 对于 JavaScript、TypeScript、Java、C、C++ 和 C#，不会。这些格式化工具只重新构建缩进，以及花括号和分号周围的换行；每一行的其余部分按原样复制。

它使用什么缩进？ JavaScript、TypeScript、HTML、CSS、JSON 和 XML 使用两个空格。Python、Java、C、C++ 和 C# 使用四个空格。

为什么我的代码在格式化后看起来几乎没变？ 如果输入的代码已经使用了一致的间距和同一种括号风格，格式化工具主要是重新构建缩进，因此变化可能很小。它对缩进混乱的代码，或被压缩成寥寥几行的代码最有用。

参考文献

  1. MDN Web Docs（Mozilla）。JSON.stringify()。JSON.stringify() 参考 — 数值型的 space 参数设定每级缩进所用的空格数。
  2. Python 软件基金会（Python Software Foundation）。The Python Language Reference: Lexical analysis。Python 词法分析：缩进 — 行首的空白决定每一行的缩进级别，从而对语句进行分组。
  3. Python 软件基金会（Python Software Foundation）。PEP 8: Style Guide for Python Code。PEP 8 — "Use 4 spaces per indentation level."