使用 oxlint + oxfmt 替换 ESLint + Prettier

0 阅读3分钟

最近我将自己的 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
  • 限制它们的运行范围

这里我不需要它来格式化 drizzledist 中的文件,我们需要在 .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. 运行脚本检查是否可以正确格式化

两者运行速度对比