前两天刚刚讨论完Vize(参考这篇文章: # 前端圈子又出新东西了，大幅提升解析速度。尤雨溪推荐，但我不太推荐)，这两天发现前端又出现新工具了，而且是尤大力荐的，我得到这个消息还算是比较晚的了。

其实这款插件早已官宣，最最关键的一点是，它的速度比咱们常用的Prettier快了整整45倍。

今天咱们简单看一下这款插件 —— oxfmt。

背景

其实前端最近几年一直在致力于底层的革新，原因也非常简单，Js在系统中的运行效率和编解码速度远逊于Rust这样的语言。

所以Vite中的 Rollup 变成了 Rolldown，esbuild 变成了 Oxc。

大家可能不太清楚 Oxc 是啥，咱们简单过一下。

Oxc是 VoidZero 团队（Vite 核心团队，尤雨溪的公司）用 Rust 开发的 JS/TS 全链路工具链。

简单说就是以后前端的底层部分全都用 Rust 写了，补齐了 Oxc 以后，Rust在前端领域实现了全替换。

带来的好处不言而喻，首先是速度。

作为编译型语言，Rust 的执行效率接近 C/C++，相比传统前端工具的 JS/Go 实现构建 / 转译速度提升 数倍到数十倍。

并且内存占用降低 50%+，大型项目不会出现 JS 工具的内存溢出 / 卡顿问题，真正意义上实现了闪电般的加载速度。

其次做为底层语言，Rust 的所有权、借用检查机制从语法层面杜绝空指针、内存泄漏等常见问题，前端工具的崩溃率、异常率大幅降低，尤其适合大型工程化场景。

最关键的一点，Rust 编译出的二进制文件无需依赖 Node.js 运行时，在 Windows/macOS/Linux 上的执行逻辑、性能表现高度一致。

解决了 JS 工具在不同系统下的兼容性问题，完美解决了跨平台一致性的问题。

Oxfmt

理解了Oxc就能简单说说 Oxfmt 了，Oxfmt 是 Oxc 生态中的代码格式化工具，也是目前已经基本上完成的 Rust 替换 Prettier 的例子。

Oxfmt Beta 几个关键词过一下：

• 100% Prettier 兼容，无缝迁移
• 支持 --migrate-prettier
• 支持更丰富的文件格式
• Import 自动排序
• package.json 自动排序
• Node.js API
• IDE 完美支持

因为本身 Oxfmt 就可以看作是 Prettier 的Rust版本，所以团队在开发的时候也选择了对 Prettier API的完全兼容，所以开发者一般是没啥感知的。

你能够感受到的也就是快！

尝鲜

安装 Oxfmt

pnpm add -D oxfmt

这里需要给 oxfmt 配置一下脚本，找到 package.json

{
  "scripts": {
    "fmt": "oxfmt",
    "fmt:check": "oxfmt --check"
  }
}

现在已经可以用了。

# 格式化文件
pnpm run fmt

# 检查格式，但不修改文件
pnpm run fmt:check

以上是比较粗浅的应用，真正想要实现项目内详细可用还需要创建一下配置文件，oxfmt 默认使用 .oxfmtrc.json 作为配置文件。

# 初始化配置文件
oxfmt --init

# 从Prettier迁移
oxfmt --migrate prettier

# 全量格式化
npx oxfmt . --write

工程化应用

日常项目开发过程中主要是保存、提交的时候自动格式化，这个场景应用的比较多。

oxfmt 在 vscode 中可以通过 Oxfmt 官方扩展实现保存格式化。

首先安装 Oxfmt 官方插件，搜索 Oxc 即可。

在 .vscode/settings.json 中添加以下配置：

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

之前用 Prettier 的同学记得关掉，避免冲突。

提交格式化可以通过 pre-commit 钩子实现：

pnpm install -D husky lint-staged
npx husky install
# 添加 pre-commit 钩子
npx husky add .husky/pre-commit "npx lint-staged"

同时在 package.json 中增加相应配置：

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

总结

我个人比较建议大家从现在开始就把 Prettier 替换为 Oxfmt，原因主要有三：

• Rust实现前端底层已成为大趋势，未来一定是这套工程大一统。
• 速度更快，内存用的更少，Vite团队开发。
• 确实好用，接近无感的存在。