最近我将自己的 Nest 项目中的 ESLint 和 Prettier 替换为 oxlint 和 oxfmt,至今运行良好。最明显的改善是速度:原先完整的 lint 检查需要 10 多秒,现在仅需 1 秒左右;保存文件时的格式化也几乎无感延迟。今天就来分享一下为什么要做这个替换,以及如何平滑迁移。
什么是 oxlint 和 oxfmt
两者都属于 oxc 项目(一个用 Rust 编写的高性能 JavaScript/TypeScript 工具链)。
- oxlint 对标 ESLint,用于代码质量检查。
- oxfmt 对标 Prettier,用于代码自动格式化。
目前它们已实现绝大多数常用规则与配置选项,兼容性良好,完全能满足日常开发需求。
由于采用 Rust 编写,它们在性能上具有数量级优势,同时保持了与现有配置相似的迁移体验。
为什么选择它们?
- 极致的速度:相比 ESLint,oxlint 在大型项目中通常快 50 倍以上;oxfmt 也远快于 Prettier,尤其在实时格式化时感知明显。
- 高度兼容:支持常见的 ESLint 规则(包括 TypeScript)和 Prettier 配置方式,迁移成本低。
- 迁移简单:配置结构与原有工具相似,大部分规则名称一致,只需少量调整即可接入。
- 专注替代:相比于一体化工具链(如 Biome),oxlint/oxfmt 更专注于直接替代 ESLint/Prettier,对现有项目改造更友好。
如果你正在寻找更快的代码检查与格式化方案,且不希望大幅改动配置,oxlint + oxfmt 是一个值得尝试的选择。它们不仅带来了开发体验上的流畅感,也延续了熟悉的配置方式,是目前 Rust 工具链中迁移成本较低的一套方案。
在现有项目中我们如何将eslint + prettier替换为 oxlint 和oxfmt
我这里有一个之前的 nest 项目,使用的是 eslint + prettier的方案,我们一起将它改造一下。具体改造步骤如下:
1. 安装依赖
pnpm add -D oxlint oxfmt
2. 改造脚本
将之前使用 ESLint 和 Prettier 的脚本改成使用 oxlint 和 oxfmt
{
"scripts": {
"lint:check": "oxlint",
"lint": "oxlint --fix",
"fmt": "oxfmt",
"fmt:check": "oxfmt --check",
},
}
3. 运行迁移脚本
- Prettier 迁移
pnpm dlx oxfmt --migrate prettier
- ESLint 迁移
pnpm dlx @oxlint/migrate ./eslint.config.mjs
- 限制它们的运行范围
这里我不需要它来格式化 drizzle 和 dist 中的文件,我们需要在 .oxfmtrc.json 和 .oxlintrc.json 中添加以下代码。你可以根据你要限制的范围来配置
"ignorePatterns": ["drizzle/**", "dist/**/*"]
- 删除之前的
.prettierrc - 删除 eslint.config.mjs 中的 prettier 插件
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'; // [!code --]
// 其他内容
eslintPluginPrettierRecommended, // [!code --]
- 移除 prettier 插件
pnpm remove prettier
4. 添加 vscode 配置
.vscode/extensions.json 中添加 oxc 插件
{
"recommendations": ["oxc.oxc-vscode",],
}
这是让别人在使用该项目时 vscode 提示该项目需要安装 oxc
.vscode/settings.json 改造
{
"oxc.fmt.configPath": ".oxfmtrc.json",
"editor.defaultFormatter": "oxc.oxc-vscode",
"editor.formatOnSave": true,
"[javascript]": {
"editor.defaultFormatter": "oxc.oxc-vscode",
"editor.formatOnSave": true,
},
"[typescript]": {
"editor.defaultFormatter": "oxc.oxc-vscode",
"editor.formatOnSave": true,
},
}