Oxfmt Beta发布：由Rust驱动的前端代码格式化新工具，获尤雨溪背书

昨天，Oxc 项目正式发布了 Oxfmt Beta。

随后，Vue 作者尤雨溪（Evan You）在社交平台转发并评论道：

冲啊！自从在工作流程中使用它之后，我就再也不用考虑格式问题了。速度太快了，几乎感觉不到这一步的存在。

这一评价立刻引发了社区讨论：Prettier 的挑战者，真的出现了吗？

Oxfmt 是什么？

Oxfmt 是 Oxc 生态系统中的代码格式化工具。

而 Oxc 是一个用 Rust 编写的 JavaScript 编译工具链，其目标是打造高性能、完整的一站式前端基础设施。

这次发布的 Oxfmt Beta，主打以下几个核心特性：

• ✅ 100% Prettier 兼容性
• ✅ 支持更多文件格式
• ✅ Tailwind CSS 集成
• ✅ Import 语句自动排序
• ✅ package.json 自动排序
• ✅ 嵌入式语言（如Vue SFC、JSX中的CSS）格式化
• ✅ Node.js API
• ✅ 支持 --migrate-prettier 迁移命令
• ✅ 完整的 IDE 支持

简单来说，Oxfmt 的野心在于：它既想完全兼容现有的 Prettier 生态与配置，又试图在性能和功能上实现超越。

尤雨溪为何感叹“太快了”？

“格式化步骤变得隐形”——这是尤雨溪给出的评价。

对于一个代码格式化工具来说，这无疑是极高的赞誉。因为这类工具在我们的工作流中属于高频触发项：

• 保存文件时自动运行
• 提交代码前在Git钩子中运行
• 持续集成（CI） 流水线中会执行检查
• 整个团队协作都依赖于统一的格式规范

工具的响应速度直接影响开发体验：如果慢 300ms，你会有所察觉；如果慢 800ms，可能开始感到烦躁；如果超过 1s，你或许会考虑关闭它。

而“隐形”的含义正是：快到你完全意识不到这个步骤的存在。这正是基于 Rust 的工具链（如 Oxc）正在挑战乃至取代传统 JavaScript 工具链的核心优势之一。

如何在 Vue3 项目中快速接入 Oxfmt？

下面提供一套可以直接复用的接入方案。

第一步：安装

在你的 Vue3 项目根目录下执行：

npm install -D @oxc/oxfmt
# 或使用 pnpm
pnpm add -D @oxc/oxfmt

安装完成后，可以检查版本确认安装成功：

npx oxfmt --version

第二步：执行首次全量格式化

npx oxfmt . --write

说明：

• . 表示对当前目录下的所有目标文件进行格式化。
• --write 参数表示将格式化结果直接写回源文件，而不是仅输出到控制台。

建议在项目初次接入时，执行一次全量格式化，确保代码库格式统一。

第三步：将命令集成到 package.json 脚本中

在 package.json 的 scripts 字段中添加：

{
  "scripts": {
    "format": "oxfmt . --write",
    "format:check": "oxfmt . --check"
  }
}

效果：

• npm run format → 执行一键格式化。
• npm run format:check → 在CI环境中检查代码格式是否正确，无需修改文件。

第四步：（推荐）配置提交前自动格式化

首先安装必要的工具：

npm install -D husky lint-staged
npx husky install

然后添加 Git 的 pre-commit 钩子：

npx husky add .husky/pre-commit "npx lint-staged"

最后，在 package.json 中配置 lint-staged：

{
  "lint-staged": {
    "*.{js,ts,vue,json,css,scss,md}": [
      "oxfmt --write"
    ]
  }
}

这样配置的好处：

• ✔ 仅格式化本次提交所改动的文件，效率极高。
• ✔ 得益于 Rust 的性能，几乎是秒级完成。
• ✔ 对开发流程无感，提升体验。

第五步：在 VS Code 中启用保存时自动格式化

安装 Oxfmt 的官方 VS Code 扩展后，在项目或全局的 .vscode/settings.json 文件中添加以下配置：

{
  "editor.formatOnSave": true,
  "[vue]": {
    "editor.defaultFormatter": "oxc.oxfmt"
  },
  "[javascript]": {
    "editor.defaultFormatter": "oxc.oxfmt"
  },
  "[typescript]": {
    "editor.defaultFormatter": "oxc.oxfmt"
  }
}

⚠ 注意：请记得在设置中关闭 Prettier 作为相关语言的默认 formatter，以避免扩展冲突。

第六步：从现有 Prettier 配置平滑迁移

如果你的项目已经使用了 Prettier，Oxfmt 提供了便捷的迁移命令：

npx oxfmt --migrate-prettier

该命令会自动读取你项目中的 Prettier 配置文件（如 .prettierrc），并将其转换为 Oxfmt 的配置。之后，再执行一次全量格式化即可：

npx oxfmt . --write

最后，你可以安全地移除项目中对 prettier 的相关依赖。

Oxfmt 会取代 Prettier 吗？

现在就断言 Oxfmt 将“完全取代” Prettier 还为时过早。但一个明显的趋势是，前端底层的工具链正在加速 Rust 化。

从打包工具（如 esbuild, rspack），到编译工具（如 swc），再到代码检查与格式化工具（如 biome, oxc），Rust 带来的性能优势实在太显著。

更重要的是，Oxc 并不只是一个 formatter。它定位为一套完整的工具链，涵盖了 parser（解析器）、linter（代码检查器）、transformer（转换器）和 formatter（格式化器）。未来的理想状态可能是：一套统一的 AST（抽象语法树）贯穿编译、Lint、Format 全流程。

如果这条技术路线能够走通，那么对 Prettier 而言，面临的将不仅仅是“被一个更快的格式化工具替代”，而可能是一次“前端工具链架构的整体升级”。

核心价值：追求极致的开发体验

尤雨溪的评价，实际上揭示了一个更深层次的趋势：优秀工具的终极目标，是让用户忘记其存在本身。

当代码格式化快到“隐形”，当保存文件毫无延迟感，当提交代码无需等待格式检查，开发者的心流体验便得以完整保存。这种对“无感”体验的追求，正是前端工具演进的重要方向之一。

Oxfmt 的出现，尤其是获得像尤雨溪这样的 Vue.js 生态核心人物背书，无疑为这场变革增添了重量级砝码。其底层由 Rust 驱动，并通过完善的 Node.js API 提供接入能力，技术栈的选择也颇具前瞻性。

写在最后

目前，Oxfmt 仍处于 Beta 测试阶段。但当像尤雨溪这样的技术领袖亲自为其站台，当基于 Rust 的高性能工具链开始系统性重构前端开发的基础设施，当“快至无感”成为评判工具的新标准时，我们可以确定：

前端代码格式化领域，已经迎来了一个强有力的新选手，并可能由此开启一个新时代。对开发者而言，多一个高性能、兼容性好的选择总是一件好事。如果你对前沿工具链感兴趣，不妨在 云栈社区 的相关板块与其他开发者交流探讨。

• Oxfmt 快速使用指南：https://oxc.rs/docs/guide/usage/formatter/quickstart.html