代码格式化

工具简介

代码格式化工具可以把挤成一团、被压缩过或缩进混乱的代码重新排成整洁统一的样式。它支持网页开发中最常见的语言：HTML、CSS、SCSS、Less、JavaScript、TypeScript、JSON、XML、Markdown、YAML 和 GraphQL。

工具底层运行的是被数百万项目使用的 Prettier，结果和在 VS Code 里或通过提交钩子格式化的代码完全一样。每种语言的解析器只在选中时才加载，页面打开速度不受影响。

使用方法

1. 选择代码的 语言。
2. 粘贴代码，或打开一个文件。
3. 选择 缩进 方式（2 个空格、4 个空格或制表符）和 每行宽度。超过宽度的行会在语法允许的位置换行。
4. JavaScript 和 TypeScript 可以选择 语句末尾是否加分号；脚本和样式表可以选择是否 使用单引号。
5. 复制或下载结果。

示例

示例是一个只有一行的 HTML 页面，里面内嵌了 CSS 和 JavaScript。格式化后每个元素各占一行，CSS 规则展开成每行一个声明，脚本里的箭头函数参数加上了括号，语句末尾补上了分号：

<script>
  const items = [1, 2, 3];
  items.forEach((i) => console.log(i));
</script>

使用建议

• 格式化也是一次快速的语法检查。如果 Prettier 无法解析输入，错误信息会给出行号和列号，可以直接跳到出错的位置。
• XML 格式化时会把空白视为无意义，这样嵌套的标签才能正确缩进。如果你的文档依赖元素内部的精确空白，使用前请检查结果。
• 需要反过来压缩代码？可以用 JavaScript 与 CSS 压缩工具缩小生产环境的代码，JSON 的校验和压缩请用 JSON 格式化工具。