尤雨溪力推的新工具,比Prettier快几十倍

更新日期: 2026-02-28 阅读: 37 标签: Prettier

前两天,Oxc项目发布了Oxfmt的Beta版本。vue的作者尤雨溪马上在社交平台转发了这个消息,还说了一句话:"自从用上这个,我再也不用操心代码格式问题了。快得几乎感觉不到它的存在。"

很多开发者看到这个消息都在问:这是要取代Prettier了吗?


Oxfmt到底是什么

Oxfmt是Oxc生态里的一个代码格式化工具。Oxc是用Rust写的JavaScript工具链,目标是做一套完整的前端开发基础设施。

这次发布的Oxfmt Beta版本有几个主要特点:

  • 完全兼容Prettier

  • 支持更多文件类型

  • 内置Import自动排序

  • package.json自动排序

  • 支持嵌入式语言格式化

  • 提供Node.js api

  • 有迁移Prettier的一键命令

  • IDE支持完整

简单说,它想做的是:既保留Prettier的格式化风格,又要在性能和功能上都超过Prettier。


为什么说它快得"隐形"

尤雨溪说的"格式化步骤变得隐形",其实是对工具的最高评价。

想想看,格式化工具你一天要触发多少次:

  • 保存文件的时候运行

  • 提交代码之前运行

  • CI检查的时候运行

  • 团队协作全靠它

如果慢300毫秒,你能感觉到卡顿。如果慢800毫秒,你会有点烦躁。要是超过1秒,你可能就想关掉自动格式化了。

而"隐形"的意思就是:快到你根本意识不到它在干活。

官方测试数据显示,Oxfmt比Prettier快30倍以上,比同样是Rust写的Biome也要快3倍左右。这就是为什么Rust写的工具链正在逐渐取代JavaScript写的旧工具。


Vue3项目怎么用上Oxfmt

下面是一套完整的接入方法,可以直接复制用。

第一步:安装

在项目根目录运行:

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

装完检查一下版本:

npx oxfmt --version

第二步:全量格式化一次

npx oxfmt . --write

说明一下:.代表当前目录,--write表示把格式化结果写回文件。第一次接入建议全量跑一遍。

第三步:加到package.json脚本里

{
  "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

添加提交前钩子:

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

然后在package.json里加上:

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

这样做的好处是:只格式化本次要提交的文件,速度飞快,不影响开发体验。

第五步:VS Code保存时自动格式化

先安装Oxfmt官方扩展,然后在项目里的.vscode/settings.json文件添加:

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

注意:记得把Prettier从默认格式化工具里关掉,不然会冲突。

第六步:从Prettier迁移过来

如果项目里已经用了Prettier,可以这样迁移:

npx oxfmt --migrate-prettier

然后全量格式化一次:

npx oxfmt . --write

最后把Prettier相关的依赖删掉就行。


Oxfmt真能取代Prettier吗

现在说"完全取代"还太早。但这个趋势已经很明显了。

看看这几年的变化:esbuild、swc、rspack、biome,再到现在的oxc,前端底层工具正在全面Rust化。性能优势太明显了,这是没办法忽视的。

更关键的是,Oxc不只是一个格式化工具。它是一个完整的工具链:

  • 解析器(parser)

  • 代码检查(linter)

  • 代码转换(transformer)

  • 格式化(formatter)

未来的可能是:同一个语法树,贯穿编译、检查、格式化整个流程。如果这条路走通了,Prettier就不只是被替代,而是被整个架构升级甩在后面。


真正的核心是"消失感"

尤雨溪那句话其实点出了一个很深的道理:好工具的终极目标,是让你忘了它的存在。

当格式化快得察觉不到,当保存文件没有延迟,当提交代码不用等待,开发体验才算是真的上了一个台阶。


写在最后

Oxfmt现在还处于Beta阶段,但有几个信号值得注意:Vue的作者亲自背书,Rust工具链正在重构前端基础设施,"快到隐形"成了新的评价标准。

这些都说明一件事:前端格式化工具,正在进入一个新的时代。

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/13353

相关推荐

prettier代码格式化工具

两种linter都可以实现fix功能,所谓fix就是将原代码转化为符合一定规则的新代码。虽然linter工具fix之后的代码,解决了大部分问题,但可能有些地方并不符合我们的阅读代码的习惯,比如一行代码过长。

在Vue项目中使用Eslint+Prettier+Stylelint

首先搭建vue项目,lint选择ESLint + Prettier,配置方式选择In dedicated config files。具体搭建过程这里就不赘述了,如果不熟悉的同学可以点击这里。配置 Stylelint,目前还没有stylelint选项,需要我们自己安装相关的 npm 包

如何在 React 项目中整合 Eslint 和 Prettier?

首先,我们使用官方提供的脚手架 create-react-app 来创建一个项目:Eslint 是一个可以检验代码,并给出报告的工具。它的目标是保证代码的一致性,避免错误。Eslint 为我们提供了 ECMAScript/JavaScript 规范的代码校验

认识 ESLint 和 Prettier

先说是什么:ESLint 是一个检查代码质量与风格的工具,配置一套规则,他就能检查出你代码中不符合规则的地方,部分问题支持自动修复。

大部分开发者用错了Prettier,这里有正确用法

Prettier在现代网页开发中就像咖啡机:人人都在用,但真正知道它怎么工作的人很少。大多数开发者安装完Prettier,打开保存时格式化选项,然后就不管了。但有个尴尬的事实:如果你只是安装了Prettier,从没配置过它,那你很可能在用错它。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!