使用oxlinto和xfmt替换ESLint和Prettier

在现有项目中我们如何将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'; 
// 其他内容
eslintPluginPrettierRecommended, 

• 移除 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,
  },
}

作者：Whbbit1999 链接：https://juejin.cn/post/7604685644684673076 来源：稀土掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。