Prettier与JS-Beautify有什么区别？JS美化工具选型指南

一、底层运作机制：AST 重塑 vs Token 规则微调

许多刚接触格式化工具的开发者常问：“两者都是把杂乱的代码变整齐，为什么实际格式化出来的效果差距这么大？”这背后的根源在于两者的底层算法机制截然不同。

1. JS-Beautify 的微调机制（Token 流修补）

JS-Beautify 的工作过程类似一个带有规则表的“文本扫描仪”。它逐字符扫描代码并生成 Token 流，遇到特定符号（如 {、}、,、;）时，根据配置的参数决定在其前后是否追加空格或换行。

这种机制最大的特点是高度尊重原代码的换行结构。如果开发者在某处手动敲了两个回车，或者将一个长数组折成了特定的几行，JS-Beautify 默认会选择保留（依托 preserve_newlines 规则），只调整各行的缩进层级。它不会主动去度量整行的字符长度是否超出屏幕边界，也不具备对整个语法上下文进行重构排版的能力。

2. Prettier 的重构机制（AST 解析与重排打印）

Prettier 的处理流程彻底打破了原文本的束缚。它首先调用解析器（如 Babel、TypeScript 解析器）将源代码解析成抽象语法树（AST，Abstract Syntax Tree），完全丢弃代码中原有的所有空格、缩进和换行（仅保留注释位置与空行语义）。

接着，Prettier 依托自身内置的打印引擎（基于 Wadler 的“最优美观打印算法”理论），根据设定的最大行宽（printWidth，默认 80），从头重新计算每个语法节点的摆放方式：当一行内容放得下时保持单行紧凑展示；一旦超出阈值，立即自动拆分为标准缩进的多行结构。这意味着无论开发者最初写得多乱、换了多少次行，经过 Prettier 处理后的输出结果都是确定且唯一的。

二、核心区别维度剖析

为了让技术选型更加具体，我们将两者的差异归纳为四个核心维度：

1. 换行与行宽控制

JS-Beautify：主要通过 wrap_line_length 控制折行，但如果长表达式或多嵌套解构未达到触发边界，或者原作者已经进行了换行，它通常选择沿用。这导致在长链式调用（如 Promise 链或数组链式方法）中，代码依然可能参差不齐。

Prettier：拥有绝对的行宽统治权（printWidth）。它会估算整个语句树的长度，如果一行超过限制，自动将其解构为清晰的多行结构；如果多行合并后未超过宽度，又会自动收拢为单行。这保证了代码在视觉阅读上具有极高的一致性。

2. 配置哲学与自定义自由度

JS-Beautify：拥有超过 40 项细分配置。例如：控制大括号是放在行尾还是另起一行（brace_style）、圆括号内部是否要加空格（space_in_paren）、逗号悬挂位置等。它适合对个人排版有极高控制欲的场景。

Prettier：信奉“无争议的代码哲学”。官方团队刻意拒绝增加过多的样式开关（核心配置项仅 20 个左右），甚至拒绝添加诸如“方法名与括号间空格”等琐碎选项。Prettier 的目的就是终止团队代码 Review 时无休止的“排版口水战”。

3. 多语言与现代前端框架支持

JS-Beautify：诞生时间早，起初主要针对传统的 JavaScript、HTML 与 CSS。虽然有相关派生支持，但面对现代全栈开发中的复杂组合（如 TypeScript 高级泛型类型声明、JSX/TSX 混合排版、Vue SFC 单文件组件、Tailwind CSS 类名排序、GraphQL/MDX 等），解析与排版常有力不从心的边界情况。

Prettier：原生深度支持现代化前端技术栈。无论是 JSX 的标签闭合折行、TypeScript 接口定义、Vue/Svelte 单文件模板，还是 JSON、YAML、Markdown、SCSS，Prettier 均提供了高度一致的排版体验，并支持丰富的社区插件生态。

三、代码格式化效果直观对比

为了具体感受两者的区别，我们来看一段典型的复杂对象与长参数函数在两个工具处理下的输出差异。

1. 格式化前混乱的源代码

// 原始凌乱代码：混合了不规则空格、换行和过长的参数列表
function calculateUserSummary(  userId,  userInfo={ active: true, roles: ["admin", "editor"] }, 
  options = { sendEmail: false, timeout: 5000 } ) {
const result = fetchSummary(userId)
.then(res => { return res.data; }).catch(err => { console.error("Failed", err); });
return { status: "success", payload: { id: userId, ...userInfo, ...options }, timestamp: Date.now() };
}

2. JS-Beautify 处理后的效果

JS-Beautify 按照规则统一了缩进和大括号周围的空格，但由于原代码在参数定义处手动折行了，它选择继续保留原本的换行位置，并没有把第二行过长的默认对象拆开：

function calculateUserSummary(userId, userInfo = {
        active: true,
        roles: ["admin", "editor"]
    },
    options = {
        sendEmail: false,
        timeout: 5000
    }) {
    const result = fetchSummary(userId)
        .then(res => {
            return res.data;
        }).catch(err => {
            console.error("Failed", err);
        });
    return {
        status: "success",
        payload: {
            id: userId,
            ...userInfo,
            ...options
        },
        timestamp: Date.now()
    };
}

3. Prettier 处理后的效果

Prettier 识别到参数过长且定义复杂，直接将整个参数列表展开为规范的多行结构，并将 Promise 链与返回对象按照统一规则重构打印：

function calculateUserSummary(
  userId,
  userInfo = { active: true, roles: ["admin", "editor"] },
  options = { sendEmail: false, timeout: 5000 }
) {
  const result = fetchSummary(userId)
    .then((res) => res.data)
    .catch((err) => {
      console.error("Failed", err);
    });

  return {
    status: "success",
    payload: { id: userId, ...userInfo, ...options },
    timestamp: Date.now(),
  };
}

四、落地实战：Prettier 工程化最佳配置步骤

如果你决定在团队或新项目中使用更具现代工程优势的 Prettier，可以遵循以下标准四个步骤进行平滑落地，实现“保存即格式化”与“提交自动拦截”。

步骤 1：安装核心依赖

在项目根目录运行以下命令安装 Prettier。同时，如果项目中使用了 ESLint，建议一并安装 eslint-config-prettier，用于关掉所有可能与 Prettier 冲突的 ESLint 格式规则：

npm install --save-dev prettier eslint-config-prettier

步骤 2：创建配置文件

在根目录下创建 .prettierrc，遵循最少争议原则配置核心规则：

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always"
}

同时创建 .prettierignore，防止误排版打包构建产物或依赖：

node_modules
dist
build
coverage
*.min.js

步骤 3：统一 VS Code 编辑器行为

为了让团队成员在保存文件时自动触发美化，可以在项目根目录的 .vscode/settings.json 中写入公共配置：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

步骤 4：配置 Git Hook 提交拦截

为了杜绝个别成员未安装编辑器插件导致漏排版，使用 lint-staged 在 Git 提交前仅对暂存区代码执行美化。在 package.json 中配置：

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,css,md}": [
      "prettier --write"
    ]
  }
}

五、选型决策指南：哪种场景适合哪款工具？

在了解了技术差异与实战流程后，面对具体的项目与开发场景，你可以参照以下选型决策树进行快速判断：

总结与快速选型参考表

综合来看，代码美化工具的演进折射出前端工程化对“协作效率”与“可维护性”的极致追求。JS-Beautify 作为一个成熟且经典的工具，在特定保留排版与解混淆场景下仍然具有实用价值；而 Prettier 凭借 AST 重建的断然决心与对争议的最小化控制，已经成为当今 Web 研发体系不可动摇的事实标准。新项目直接采纳 Prettier，是对团队长远维护成本最低的明智选择。