尤雨溪官宣:前端新工具来了,比Prettier快45倍!

1 阅读4分钟

🚀 尤雨溪的"神秘包裹"

10月19日,Vue之父尤雨溪在Twitter上晒了一张截图,前端圈瞬间炸锅: 在这里插入图片描述

格式化太慢?Lint卡到爆?不,我们全都要!

这就好比你一直骑共享单车上班,突然有人送你一辆特斯拉——还是带自动驾驶的!


📊 性能对比:这是开了外挂吧?

oxfmt:格式化界的"闪电侠"

🐢 Prettier:格式化1000个文件 = 45秒(够泡杯咖啡)
🚀 oxfmt:格式化1000个文件 = 1秒(咖啡还没反应过来)

速度提升:45倍!

对比Biome:快2-3倍
对比Prettier:快45倍
你的感受:从"等等等"到"好了?!"

oxlint:代码检查界的"透视眼"

🐌 ESLint:检查1000个文件 = 50-100秒(刷个短视频的时间)
⚡ oxlint:检查1000个文件 = 1秒(眨个眼而已)

速度提升:50-100倍!

已完美兼容:Vite、Vue、React、Next.js、AntDesign


🔧 安装指南:比点外卖还简单

快速体验(尝鲜版)

# 格式化文件
npx oxfmt@latest src/**/*.{js,ts,jsx,tsx}

# 检查代码
npx oxlint@latest src/**/*.{js,ts,jsx,tsx}

就像临时借邻居的电钻,用完就还,零负担!

正式安装(长期伴侣)

npm install -D oxlint oxfmt

然后在 package.json 里配置:

{
  "scripts": {
    "lint": "oxlint src/",
    "lint:fix": "oxlint --fix src/",
    "format": "oxfmt src/",
    "format:check": "oxfmt --check src/"
  }
}

🎛️ 配置说明:老工具的配置直接搬

oxfmt配置(.oxfmtrc.json)

{
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

好消息:你的 .prettierrc 改个名就能用!
就像:从iPhone换到iPhone,数据一键迁移。

oxlint配置(.oxlintrc.json)

{
  "rules": {
    "no-console": "warn",
    "no-debugger": "error",
    "prefer-const": "error"
  }
}

ESLint用户:80%的规则配置直接复制粘贴!


🛠️ 迁移指南:换工具不换习惯

从Prettier迁移(3步走)

# 1. 卸载旧工具
npm uninstall prettier

# 2. 安装新工具
npm install -D oxfmt

# 3. 改个名字
mv .prettierrc .oxfmtrc.json

难度:⭐(把"prettier"换成"oxfmt")

从ESLint迁移(3步走)

# 1. 卸载旧工具
npm uninstall eslint

# 2. 安装新工具
npm install -D oxlint

# 3. 迁移配置
# 复制.eslintrc规则到.oxlintrc.json

难度:⭐⭐(配置稍微调整一下)


⚙️ 技术原理:为什么这么快?

Rust + WASM = 涡轮增压

Rust性能

传统工具:JavaScript单线程,像一个工人在搬砖
OXC工具:Rust多线程,像施工队同时作业

核心优势

  • Rust编译:零成本抽象,性能拉满
  • 并行处理:多核CPU火力全开
  • 智能缓存:只处理变更的文件

💰 实际收益:时间就是金钱

大型项目(1000+文件)

每天格式化次数:20次
Prettier耗时:20 × 45秒 = 15分钟/天
oxfmt耗时:20 × 1秒 = 0.3分钟/天

每天节省:14.7分钟
每年节省:90小时(≈ 11个工作日!)

相当于:每年多休两周假!

CI/CD流水线

ESLint检查:100秒
oxlint检查:1秒

每次CI节省:99秒
每天CI 50次:每天节省82分钟

运维小哥:终于不用盯着进度条发呆了!


🎯 适用场景:谁最需要?

✅ 强烈推荐

  • 大型企业项目:代码库庞大,格式化等待痛苦
  • 团队协作项目:CI/CD频繁,性能提升明显
  • 低配电脑用户:拯救你的老笔记本

⚠️ 建议观望

  • 超小项目:10个文件,快慢差别不大
  • 重度定制规则:等待更多插件支持

📝 注意事项:平滑过渡

渐进式迁移策略

1. 个人分支试用 → 2. 对比输出差异 → 3. 团队评审 → 4. 正式上线

就像:先试吃再买单,不满意可以退货!

兼容性检查

  • ✅ 输出格式与Prettier高度一致
  • ✅ 支持大部分ESLint常用规则
  • ✅ VS Code、WebStorm完美支持

🎉 总结:新时代的号角

OXC工具 = 性能怪兽 + 迁移友好 + 配置简单

下一步行动清单

  1. 立即试用npx oxfmt@latest 体验秒级格式化
  2. 团队评估:在测试分支对比差异
  3. 制定计划:根据项目情况逐步迁移

从今天开始

  • ❌ 告别"格式化中..."的漫长等待
  • ✅ 迎接"格式化完成"的瞬间快感

前端开发的电动工具时代,正式开启! 🚀