使用 oxlint + oxfmt 替换 ESLint + Prettier

最近我将自己的 Nest 项目中的 ESLint 和 Prettier 替换为 oxlint 和 oxfmt，至今运行良好。最明显的改善是速度：原先完整的 lint 检查需要 10 多秒，现在仅需 1 秒左右；保存文件时的格式化也几乎无感延迟。今天就来分享一下为什么要做这个替换，以及如何平滑迁移。

什么是 oxlint 和 oxfmt

两者都属于 oxc 项目（一个用 Rust 编写的高性能 JavaScript/TypeScript 工具链）。

• oxlint 对标 ESLint，用于代码质量检查。
• oxfmt 对标 Prettier，用于代码自动格式化。

目前它们已实现绝大多数常用规则与配置选项，兼容性良好，完全能满足日常开发需求。

由于采用 Rust 编写，它们在性能上具有数量级优势，同时保持了与现有配置相似的迁移体验。

为什么选择它们？

1. 极致的速度：相比 ESLint，oxlint 在大型项目中通常快 50 倍以上；oxfmt 也远快于 Prettier，尤其在实时格式化时感知明显。
2. 高度兼容：支持常见的 ESLint 规则（包括 TypeScript）和 Prettier 配置方式，迁移成本低。
3. 迁移简单：配置结构与原有工具相似，大部分规则名称一致，只需少量调整即可接入。
4. 专注替代：相比于一体化工具链（如 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,
  },
}

5. 运行脚本检查是否可以正确格式化

两者运行速度对比