代码格式化

工具介绍

写代码、读日志、调接口时,常会遇到缩进混乱、被压成一行或风格不一的代码——既难读又容易出错。把它一键排版整齐,或反过来压成单行,是开发者每天都要做的事。手动调整不仅费时,不同人的风格还各不相同,统一的自动格式化能从根本上消除这些争议。

本工具的核心引擎是 Prettier 的浏览器标准构建:同一套规则覆盖 JavaScript、TypeScript、JSX/TSX、Vue 单文件组件、JSON、JSON5、CSS/SCSS/LESS、HTML、Markdown、YAML、GraphQL 等主流语言;在此之上再用 sql-formatter 补齐多种 SQL 方言的格式化,用 @prettier/plugin-xml 支持 XML 与 SVG。你只需选好语言、粘贴代码,即可一键得到整洁统一的排版,JSON 还可一键压成单行。

不同团队和场景对风格的偏好各异,工具因此开放了常用配置:缩进可选 2 个空格、4 个空格或 Tab,每行最大宽度(printWidth)、尾随逗号(all/es5/none)、是否加分号、单引号还是双引号都能即时调整,SQL 还可设置关键字保持原样、全大写或全小写。当源码本身存在语法错误时,工具会直接显示 Prettier 给出的具体报错与大致位置,而非笼统的「格式不对」,帮助你快速定位修正。所有解析与格式化都在浏览器本地完成,代码不会上传到任何服务器,处理公司私有代码、含密钥的配置也安全放心,免去本地搭建工具链的麻烦。

使用方法

1. 选择代码语言(SQL 可再选方言与关键字大小写),把代码粘贴到输入框。
2. 按需调整缩进(2/4 空格或 Tab)、每行宽度、尾随逗号、分号、单引号等风格选项。
3. 点击「格式化」按统一规范排版;JSON 可点「压缩」压成单行。
4. 若源码有语法错误,输入框下方会给出 Prettier 的具体报错与大致位置。
5. 点击输出区「复制」按钮取走结果。

常见问题

代码会上传服务器吗?

不会。格式化引擎(Prettier 浏览器版、sql-formatter 等)全部在你的浏览器本地运行,代码不会上传,处理私有代码也安全。

支持哪些语言?

基于 Prettier 覆盖 JavaScript、TypeScript、JSX/TSX、Vue、JSON、JSON5、CSS/SCSS/LESS、HTML、Markdown、YAML、GraphQL;并用 sql-formatter 支持多种 SQL 方言,用 plugin-xml 支持 XML/SVG。

可以调整哪些格式风格?

可设置缩进为 2/4 个空格或 Tab、每行最大宽度(printWidth)、对象数组的尾随逗号(all/es5/none)、是否加分号、用单引号还是双引号;SQL 还能选择关键字保持原样/全大写/全小写。

“压缩”支持所有语言吗?

压缩(压成单行)主要适用于 JSON——通过解析后无空白重新序列化实现。其它语言以「格式化」为主,Prettier 不做代码混淆式压缩。

格式化报错是怎么回事?

通常是源代码本身有语法错误(括号不匹配、引号未闭合等)。Prettier 需要先能解析才能格式化,工具会显示具体报错与大致位置,按提示修正语法即可。

能复用团队的 Prettier 配置吗?

本工具提供常用选项的可视化调节;更细的团队规范建议在项目里用 .prettierrc 配置文件统一管理,以保证与编辑器、CI 一致。

相关工具