【vue3】如何在项目中使用oxlint

去年元旦前自己想着要写一个自己的今年日app，所以

基于uniapp官网的vue-cli创建模版，大家应该都不陌生。
创建完模版后，我先利用自己的小工具一键添加了eslint、prettier、保存格式化、jsconfig.json、commitLint等多个校验格式化的插件
我的小工具链接

为了避免类名冲突，我又加了tailwindcss，不过uniapp使用tailwindcss的方式要和PC的方式有点出入，下次再说。

重点是之前知道oxlint可以使用了，但是一直没有尝试所以这次就加入了oxlint。

oxlint是什么

oxlint是一个用于检查 Vue.js 组件代码质量的 Linter 工具。它基于 ESLint 并添加了一些针对 Vue.js 特定的规则，旨在帮助开发者编写更符合 Vue.js 规范和最佳实践的代码。

作用

• 代码风格检查：确保代码遵循一致的编码风格，提高代码的可读性和可维护性。
• 错误提示：发现代码中的潜在错误，如语法错误、逻辑错误等。
• 最佳实践建议：提供关于如何改进代码的建议，帮助开发者遵循 Vue.js 最佳实践

使用步骤

1. 在项目中使用

yarn add --dev oxlint

或者你想在项目的根目录直接运行也可以：

npx oxlint@latest

oxlint 不需要 Node.js，可以从最新的 GitHub 版本下载二进制文件。

2. oxlint的官方使用说明
   当然每一个开发者在使用前肯定是要看文档的，我也是在仔细阅读官方的文档后知道，oxlint可以作为eslint的前置规则校验并格式化代码，减轻eslint校验的压力，因为oxlint遵循的规则和eslint配置的规则是有出入的，所以我们不能一棍子打死只用oxlint。

那么什么时候用oxlint呢？
我在上面使用了commitLint，那我就是准备再commit阶段触发lint-stage的时候去校验

配置lint-stage

由于我的lint-stage是直接用工具生成的，所以只需要修改一下就好了，下面是我的配置

"eslint": "npx oxlint --fix --no-ignore src  && eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,js,tsx}\" --fix",

"lint-staged": {
    "*.{js,ts,vue,jsx,tsx}": [
      "npm run eslint"
    ],
    "*.{js,jsx,ts,tsx,md,html,css,lees,scss,sass}": "prettier --write",
    "exclude": [
      "dist/**"
    ]
  },

我的配置是在我npm run commit 的时候触发，利用git-cz。

---

也可以像官网一样直接使用oxlint

{
  "lint-staged": {
    "**/*.{js,mjs,cjs,jsx,ts,mts,cts,tsx,vue,astro,svelte}": "oxlint"
  }
}

或者使用eslint-plugin-oxlint关闭oxlint支持的eslint规则，这样你同时可以享受oxlint的速度还可以继续使用eslint

pnpm add eslint-plugin-oxlint --D

// eslint.config.js
import oxlint from "eslint-plugin-oxlint";
export default [
  ...// other plugins
  oxlint.configs["flat/recommended"], // oxlint should be the last one
];

// 如果使用旧配置（eslint<9.o），则可以使用以下配置：
// .eslintrc.js
module.exports = {
  ... // other config
  extends: [
    ... // other presets
    "plugin:oxlint/recommended",
  ],
}

// 在eslint之前使用oxlint
// package.json
{
  "scripts": {
    "lint": "npx oxlint && npx eslint"
  }
}