RS基建锈化之Oxlint无缝尝鲜

tmg0
1,092 阅读3分钟

项目地址：unplugin-oxlint

Rolldown 都开源嘞，真的不来看看 oxc 么？前端基建锈化的势头这么猛，Oxlint 作为 Rolldown 幕后团队 oxc 的模块之一已经被用上了，还不快来尝尝鲜

Oxlint

Rust 编写的一个为 javascript 服务的 lint 工具，那既然和 rs 沾边，性能是不用操心的了。比 eslint 快 50 - 100 倍（文档里说的）现在支持包括插件扩展在内的200条规则

同时也基本上支持 eslint rules 的配置方式

现实很骨感

苍蝇搓手 install 下来试试就会发现也并没有想象中那么美好，和 eslint 比起来生态还是差太多了

如果只安装 oxlint 会发现基本告别了可用性，所以还是需要一个折中的方案，有没有替换部分 oxlint 已有规则的可能？

嗯～很贴心 官方已经有了这样的工具 eslint-plugin-oxlint

用起来会是：

{
  "scripts": {
    "lint": "npx oxlint && npx eslint"
  }
}

输出不友好都另说，排除了的规则在 vscode eslint 插件中都没有自动格式化了，头皮发麻

所以我们需要一个工具帮助我们实现 oxlint + eslint 混合使用，自动格式化，友好的日志输出 ⇒

unplugin-oxlint

在文档中也能看到有个 vite-plugin-oxlint 插件，但是一方面他只支持 vite 让其他 esbuild 友好 coder 咋办！另一方面能发现他内部最终使用的还是 npx oxlint 命令，导致如果需要集成 eslint 还得另外实现。

所以推荐一波 unplugin-oxlint

 WARN  [unplugin-oxlint] src/index.ts                                                                                                                                                            17:02:35

       ⚠ Disallow the use of undeclared variables (oxlint: no-undef)
       ⚠ Unexpected console statement. (oxlint: no-console)
       ⚠ Unnecessary escape character '"' (oxlint: no-useless-escape)
       ⚠ `debugger` statement is not allowed (oxlint: no-debugger)
       ✘ Too many blank lines at the beginning of file. Max of 0 allowed. (eslint: style/no-multiple-empty-lines)
       ✘ More than 1 blank line not allowed. (eslint: style/no-multiple-empty-lines)
       ✘ Using 'DebuggerStatement' is not allowed. (eslint: no-restricted-syntax)
       ✘ Too many blank lines at the end of file. Max of 0 allowed. (eslint: style/no-multiple-empty-lines)

试试看

一般情况下还是推荐大家和 eslint 一起使用，基本上能无缝衔接已有的项目了，以 @antfu/eslint-config 为例一起试试看叭

pnpm add eslint oxlint unplugin-oxlint @antfu/eslint-config eslint-plugin-oxlint -D

跟着 @antfu/eslint-config 文档的内容在项目根目录新建一个 eslint 配置文件，并排除 oxlint 已经涵盖的规则

// eslint.config.js
import antfu from '@antfu/eslint-config'
import oxlint from 'eslint-plugin-oxlint'

export default antfu({
  ...oxlint.configs['flat/recommended'],
})

然后在你的构建配置文件中添加 plugin 以 vite 为例：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Oxlint from '../../src/vite'

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [
    vue(),
    Oxlint({
      includes: ['src/**/*.{ts,vue}'],
      deny: ['correctness'],
      packageManager: 'npm',
    }),
  ],
})

简单！最后照常运行开发环境就会整合 eslint 和 oxlint 的结果输出到控制台惹

如果配置了 fix: true 在保存之后他也会在不改变原有代码逻辑的前提下尽量修复格式问题，也可以代替部分 vscode 插件的工作

而且 lint 只会在保存后触发当前文件的检查，所以即使是 eslint 也不会拖后腿啦

New Release

最近这段时间这个项目也是主要项目之一了，加了保存之后还是会输出所有 lint warning 的功能

因为我实际把他应用到了其他业务中的时候发现如果只是提供当前文件的校验结果还是不太方便，还得往前翻（主要还是我个人的需求辣

如果还有什么建议也欢迎 issue 或者 留言喔

最后

算是厚颜无耻的推荐自己的项目了，欢迎大家来提 issue / pr

先给自己挖个坑以后有机会聊聊源码～

也可以来我主页看看有啥其他感兴趣的嗷 ⇒ tmg0

avatar
文章
阅读
粉丝