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

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

🚀 尤雨溪的"神秘包裹"

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}

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

正式安装(长期伴侣)

npminstall -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. 安装新工具npminstall -D oxfmt # 3. 改个名字mv .prettierrc .oxfmtrc.json 

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

从ESLint迁移(3步走)

# 1. 卸载旧工具npm uninstall eslint # 2. 安装新工具npminstall -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. 制定计划:根据项目情况逐步迁移

从今天开始

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

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


Read more

.NET 的 WebApi 项目必要可配置项都有哪些?

.NET 的 WebApi 项目必要可配置项都有哪些?

目录 一、数据库配置 (一)选择合适的数据库提供程序 (二)配置数据库连接字符串 (三)数据库迁移(以 EF Core 为例) 二、依赖注入配置 (一)理解依赖注入 (二)注册服务 (三)使用依赖注入 三、Swagger 配置 (一)安装 Swagger 相关包 (二)配置 Swagger 服务 (三)启用 Swagger 中间件 四、接口接收和输出大小写配置 (一)接口接收大小写配置 (二)接口输出大小写配置 五、跨域配置 (一)什么是跨域 (二)配置跨域 六、身份验证与授权配置

前端GraphQL客户端:优雅地获取数据

前端GraphQL客户端:优雅地获取数据 毒舌时刻 前端GraphQL?这不是后端的事吗? "REST API就够了,为什么要用GraphQL"——结果前端需要多次请求,数据冗余, "GraphQL太复杂了,我学不会"——结果错过了更灵活的数据获取方式, "我直接用fetch请求GraphQL,多简单"——结果缺少缓存、错误处理等功能。 醒醒吧,GraphQL不是后端的专利,前端也需要专业的客户端工具! 为什么你需要这个? * 减少网络请求:一次请求获取所有需要的数据 * 数据精确:只获取需要的数据,避免冗余 * 类型安全:自动生成TypeScript类型 * 缓存优化:智能缓存,减少重复请求 * 开发效率:简化数据获取逻辑 反面教材 // 反面教材:直接使用fetch请求GraphQL async function fetchGraphQL(query, variables) { const response = await

Flutter for OpenHarmony: Flutter 三方库 flutter_cors 应对鸿蒙 Web 与混合开发中的跨域挑战(网络兼容方案)

Flutter for OpenHarmony: Flutter 三方库 flutter_cors 应对鸿蒙 Web 与混合开发中的跨域挑战(网络兼容方案)

欢迎加入开源鸿蒙跨平台社区:https://openharmonycrossplatform.ZEEKLOG.net 前言 在进行 OpenHarmony 的跨平台开发时,我们不仅开发原生 HAP,有时也会涉及 Flutter Web 或是在鸿蒙端侧运行 Webview 混合应用。这时,一个经典的“拦路虎”就会出现:CORS (跨源资源共享) 限制。当你的 Web 端尝试访问一个未配置跨域头部的后端 API 时,请求会被浏览器拦截,报错信息极其晦涩。 虽然 CORS 主要是后端的工作,但 flutter_cors 提供了一种客户端视角的辅助工具。它通过工具化手段帮助开发者分析、绕过或生成跨域适配规则,是保证鸿蒙跨平台 Web 项目顺利运行的调试利器。 一、跨域访问逻辑模型 CORS 是一种浏览器的安全保护机制,它在请求发出前先进行“预检(Preflight)

前端安全:别让你的应用变成黑客的游乐场

前端安全:别让你的应用变成黑客的游乐场 毒舌时刻 这代码写得跟网红滤镜似的——仅供参考。 各位前端同行,咱们今天聊聊前端安全。别告诉我你还在写明文存储密码,那感觉就像把家门钥匙挂在门口——方便,但不安全。 为什么你需要前端安全 最近看到一个项目,登录表单直接把密码发送到服务器,没有任何加密。我就想问:你是在做应用还是在给黑客送大礼? 反面教材 // 反面教材:不安全的登录 // components/LoginForm.jsx export default function LoginForm() { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const handleSubmit = async (e) => { e.preventDefault(); // 直接发送明文密码 const response = await