⭐ 觉得好用?收藏备用,下次直接打开
缩进
行宽
末尾逗号
方言
等待输入
输入
输出

代码格式化工具 把乱糟糟的代码一键排整齐,或反过来压成单行。核心引擎是 Prettier 标准浏览器构建——同一套规则覆盖 JavaScript、TypeScript、JSX/TSX、Vue SFC、JSON、CSS/SCSS/LESS、HTML、Markdown、YAML、GraphQL 等主流语言,再叠加 sql-formatter(SQL 12 种方言)和 @prettier/plugin-xml(XML/SVG)两个补位方案。

格式化 vs 压缩

格式化(Format)压缩(Minify)
目标人类可读体积最小
行宽printWidth(默认 80)换行尽量单行
注释保留部分保留(JSON 去掉)
空格规范缩进合并为一处
适用代码审查、提交前整理URL 参数、字符串字面量、配置瘦身

关键选项

tabWidth(缩进宽度)、useTabs(Tab vs 空格)、printWidth(触发换行的最大行宽)、semi(行尾分号)、singleQuote(单引号优先)、trailingComma(末尾逗号策略)——与 Prettier 官方字段一一对应,换行缩进差异完全可控。SQL 语言额外可选 MySQL、PostgreSQL、T-SQL、BigQuery、Snowflake 等 11 种方言,关键字自动大写、子句对齐。

本地运行 + 按需加载

代码不会离开浏览器。Prettier 插件按选中语言按需动态加载,没选过 SQL 就不会拉 SQL 包,首屏轻量。数 MB 源码可以流畅处理,超大文件建议先关闭”实时”开关、改成点按钮触发。

快捷键

  • ⌘/Ctrl + Enter — 格式化
  • ⇧⌘ / Shift+Ctrl + Enter — 压缩

📍使用场景

  • 美化压缩过的代码从网上抓来的一行 minified JS/CSS/JSON 难以阅读,一键还原为带缩进的可读格式。
  • 统一团队代码风格按 Prettier 的规则把分号、引号、末尾逗号、缩进拉齐,避免 PR 里混入风格型 diff。
  • 压缩上线产物把 JSON 配置、SQL、HTML 片段压成单行,塞进 URL、配置项、字符串字面量里。
  • 排查 SQL 可读性从日志抓到的一长行 SQL,按关键字换行缩进后,连接和条件一目了然。

常见问题

和 Prettier 官方在线版有什么差别?

本工具就是用的 Prettier 标准浏览器构建,核心行为一致——tabWidthprintWidthsemisingleQuotetrailingComma 等选项都对标官方字段。差异是本工具额外集成了 SQL(sql-formatter)和 XML(@prettier/plugin-xml)。所有处理纯浏览器本地完成,不上传代码。

支持哪些语言?

JavaScript/TypeScript/JSX/TSX、Vue SFC、JSON/JSONC、CSS/SCSS/LESS、HTML、Markdown、YAML、GraphQL、XML/SVG、SQL(支持 MySQL/Postgres/T-SQL/BigQuery 等 10+ 方言)。不支持:Python、Go、Java、C/C++、Rust——这些语言的浏览器端格式化没有稳定方案。

"压缩"和"格式化"有什么区别?

格式化(format)按行宽和缩进把代码排成人类可读的样子。压缩(minify)反向——尽量塞成一行、去注释。按语言策略不同:JSONJSON.stringify 最稳;JS/TS 走 Prettier printWidth:∞ 单行;CSS/SQL 走 quote-aware 状态机(字符串内容原样保留);HTML/Vue/XML 只做 Prettier 窄化、不合并元素之间的空白——因为 <span>a</span> <span>b</span> 里的那个空格在渲染时是可见的,正则层面无法安全区分"可丢"和"不可丢"。想要激进的 HTML 体积压缩请另选专用压缩器。

大文件会卡吗?

纯文本文件 几 MB 以内 基本秒级完成。Prettier 的 JS/TS parser 对超大源文件会变慢(1 MB+ 可能几秒)。如果真的很卡,先关掉"实时"开关——停止边打边格式,只在点按钮时跑一次;再不行就把文件拆段处理。

JSONC 里的注释/末尾逗号会被保留吗?

格式化json5 parser,注释和末尾逗号都保留。压缩JSON.parse 路线,工具内部会先剥掉 ///* */ 注释再解析,所以注释不保留(这是标准 JSON 的要求)。如果需要保留注释的压缩版,选"格式化"并把行宽设成 1000 即可。

格式化失败怎么排查?

状态栏会显示 Parser 抛出的错误,通常带行列号。常见原因:JS 缺分号/括号不匹配、JSON 多了末尾逗号(需切 JSONC)、YAML 缩进不一致、SQL 用了方言特有语法但选了错的 dialect。先按错误位置看上下一两行,90% 问题能直接看出来。