oxfmt 是啥玩意儿？

先说了oxfmt 是一个轻量级的代码格式化工具，专门给前端小伙伴们准备的。 它号称兼容 Prettier 的大部分特性，还Neng玩点儿geng细腻的换行策略。 说实话，刚开始我也懵逼，感觉又是一个新坑。 后来摸索了一圈，发现它真的蛮好用——省时省力，还Neng保持团队代码风格统一。 哈哈，咱们今天就来聊聊怎么把它装上、怎么用、还有一些坑子怎么躲。

一步到位装上 oxfmt

打开终端，先确保你有 Node 环境。 Ru果还没装，就赶紧去装吧，不然后面会卡壳。 装好以后一条命令搞定：

npm install -D oxfmt

不对不对，我忘了说这里Zui好加上 `--save-dev`，这样只在开发环境生效。 装完后你Ke以在 `package.json` 里kan到一条新记录。 别忘了跑一下 `npx oxfmt --version` 确认一下安装成功了没有。

把 Prettier 替换成 oxfmt

hen多项目一开始用了 Prettier，想换成 oxfmt 那就直接改 scripts 吧。 比如原来是这样：

"scripts": {
  "format": "prettier --write ."
}

改成：

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

记得把 lint‑staged 那块也同步geng新，例如：

"lint-staged": {
  "*.{js,jsx,ts,tsx,vue}": "eslint --fix",
  "*.{css,scss,less,html,json,jsonc,md,yml,yaml}": "oxfmt --write"
}

改完保存，跑 `npm run format` kankan效果吧。 Ru果报错别慌，那大概率是配置文件缺失或者版本冲突——先检查一下 `.oxfmtrc` 有没有生成。

配置文件到底长啥样？

oxfmt 支持多种配置方式，你Ke以在根目录放个 `.oxfmtrc.json`。 Zui常见的选项大概是这么写：

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all"
}

这跟 Prettier 超像，对吧？其实hen多人就是直接拷贝过去，然后微调一下自己的团队规范。 Ru果你想要geng细粒度的控制，比如只针对 JSX 的换行规则，那就加上 `overrides` 段落：

{
  "overrides": 
}

说实话，这玩意儿hen灵活，你随便折腾几次就Neng找到Zui合适的配置。

编辑器里怎么一键格式化？ VS Code 小技巧

打开 VS Code 的设置，搜索 “format on save”。勾上它——每次保存自动跑 oxfmt。 然后在 市场里搜 “oxfmt”，装上官方插件。安装完后重启编辑器，它会自动读取根目录的配置文件。 以后只要敲 `Shift+Alt+F`，代码立马整齐划一。哈哈，这感觉跟喝咖啡一样爽！ Ru果你还有 ESLint 那就配合一下：先让 ESLint 修复，再让 oxfmt 格式化——顺序hen重要哦！ 不对不对，我差点忘了要在 `settings.json` 加一句： json "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "": { "editor.defaultFormatter":"oxfmt"} } 这样每次保存dou会先跑 ESLint 再跑 oxfmt，完美！

Sublime Text 小技巧

Sublime Text 没官方插件，但我们Ke以靠快捷键搞定——全选后 Ctrl+Alt+F 调用外部命令即可。 打开 Preferences → Package Settings → Sublime​​​​​​​​​​​​​​​...其实我geng喜欢自己写个 Build System： json { "cmd":, "selector":"source.js, source.jsx, source.ts" } 保存后按 Ctrl+B 就Neng把当前文件丢给 oxfmt 格式化啦！哈哈，有点儿黑客感，对吧？ Ru果你经常切换项目记得改一下路径，不然会报 “找不到模块”。

常见坑 & 小技巧

**1️⃣ 配置没生效** 原因大多是根目录没有 `.oxfmtrc` 或者名字拼错了。不对不对，还可Neng是工作区里有另一个隐藏的配置覆盖了全局配置。 **2️⃣ 与 Prettier 共存** 有些老项目还保留 Prettier 的依赖，Ru果两者dou在同一个脚本里跑，会出现冲突报错。这时候把 Prettier 的命令全部删掉，只留 oxfmt。 **3️⃣ 文件匹配不到** 默认只匹配 *.js、*.ts 等常见 。Ru果你还有 *.vue、*.svelte，需要在 `include`/`exclude` 手动指定。 **4️⃣ 为什么百度不收录我的技术博客？** 哈哈，这个问题常被问到。我来掰掰手指头数数答案： 第一，内容太碎片化，没有形成完整体系； 第二，缺少高质量外链和站内关联； 第三，页面加载速度慢，被百度判定为“体验不好”。 解决办法嘛，多写长篇连贯的文章、Zuo好内部链接、压缩图片提升速度就行啦。 **5️⃣ 快速定位错误** 运行 `npx oxfmt . --check` 会返回哪些文件没有通过格式化检查，用编辑器打开对应行快速修正。 **6️⃣ 用 npm script 搞定全局格式化** json { "scripts":{ "format":"oxfmt \"src/**/*.{js,jsx,ts,tsx,vue}\" --write", "format:check":"oxfmt \"src/**/*.{js,jsx,ts,tsx,vue}\" --check" } } 这样只要敲 `npm run format` 就Neng一次性搞定整个 src 文件夹。

进阶玩法：迁移自 Prettier

Ru果你Yi经用了 Prettier 好久，现在想“一键迁移”，Ke以试试官方提供的迁移命令： bash npx oxfmt --migrate=prettier 这条命令会扫描你的项目，把 `.prettierrc*` 转成对应的 `.oxfmtrc*` 并输出报告，让你确认修改是否符合预期。 注意呀，有些 Prettier 独有的插件可Neng需要手动处理，不过大多数情况下douNeng顺利转换。不对不对，我刚才漏说了要先卸载 prettier 否则会冲突： bash npm uninstall prettier 卸载完再跑迁移命令，一切顺畅！

—别忘了坚持练习呀！

好了这回基本把 oxfmt 的安利、安装、配置、编辑器集成以及坑子dou聊完啦。 你要是真想让团队代码kan起来像经过专业排版师打磨，那就一定要坚持使用统一工具——别再手动调空格啦！ 记得每次改动后跑一遍 `npm run format:check` 确认没有遗漏，否则 CI 会炸掉，你懂的，那种尴尬谁受得了啊？ Zui后一句老友提醒：工具再好，也不Neng代替审美和代码可读性；适当手动微调也是一种艺术嘛~ 祝大家玩得开心，码出好kan的代码！ 哈哈，下次有新玩意儿我再跟你唠嗑～

---