Web技术1931- 比 Eslint 快 100 倍!新一代 JS Linter 发布!

每次有前端新轮子发布,官方的标题总是如此夸张,这次轮到 Eslint 挨打了。

b7a800659f95f8198ebb8428ceb845bf.png

Oxc 是用 Rust 编写的 JavaScript 语言的高性能工具集合。他们的目标是构建 JavaScript 的基本编译器工具:解析器、linter、格式化程序、转译器、压缩器和解析器等等,这次他们发布了一个新的 linter 工具。

Oxlint 是一个由 Rust 编写的新一代 JavaScript linter,旨在帮助开发者捕获错误或无用的代码,默认情况下不需要任何配置。

Oxlint 的三大特点:

  • 性能:处理代码的速度比 ESLint50-100 倍。

  • 安全:Rust 的内存安全保证消除了某些类别的错误。

  • 兼容性:目前内置了超过 200 条规则,且列表还在不断增加,来自 eslint、typescript、eslint-plugin-react、eslint-plugin-jest、eslint-plugin-unicorneslint-plugin-jsx-a11y;支持 .eslintignore 以及 ESLint 的注释忽略规则。。

但是对于取代 Eslint ,官方的回答是:

现阶段,oxlint 无意完全取代 ESLint,当 ESLint 的缓慢成为你工作流程中的瓶颈时,它可以作为增强功能。

为了更快的反馈循环,官方建议在 lint 阶段或 CI 设置中的 ESLint 之前运行 oxlint,在大型代码仓库上运行只需要几秒钟。

要在 JavaScript / TypeScript 代码库中测试 oxlint,我们只需在存储库的根目录中执行以下命令:

npx oxlint@latest // npm

pnpm dlx oxlint@latest // pnpm

yarn dlx oxlint@latest  // yarn

bunx oxlint@latest  // bun

deno run oxlint@latest  //  deno

性能

在现实场景中,Shopify 报告称,他们原来需要 75 分钟的 ESLint 运行时间现在仅需 10 秒。

来自有 Shopify 研发经验的 Preact 创建者 Jason Miller 的描述:

Oxlint 对我们在 Shopify 的应用是一个巨大的成功。我们以前的 lint 设置运行需要75分钟,所以我们在 CI 上配置了 40 多个工作节点。而相比之下,Oxlint 在单个工作节点上对同样的代码库进行 lint 检查只需要大约 10 秒,而且输出的结果更易于解读。在我们迁移时,我们甚至发现了一些被我们旧设置隐藏或跳过的错误!

大部分性能提升来自于 Oxlint 被专门设计用于提高性能,而 Rust 和并行处理是其中的关键因素。

根据在不同项目中的实际测试,linter 的速度至少比 ESLint50 倍以上,并且性能随着 CPU 核心数量的增加而继续提升。

41531eb07707b6b740aa28748ff6e653.png

这里有一个在 vscode 存储库(一个非常庞大的前端仓库:https://github.com/microsoft/vscode)上运行的示例,它在 0.5 秒内完成了 4000 多个文件的 linting

a6cef868dce3a7bd4b4d9e3d81e2709a.png

准确性

Oxlint 在默认识别错误、冗余或混乱的代码的时候,会优先考虑正确性,而不是不必要的挑剔规则(分类为 perf、suspicious、pedanticstyle),这些是默认禁用的。

上手简单

设置新的 JavaScript / TypeScript 代码库变得越来越复杂,你很可能会遇到工具间的兼容性问题,可能会浪费好几个小时的时间。

但是 Oxlint 被设计为开箱即用的零配置,甚至 Node.js 环境都不是必需的,大多数调整可以通过命令行进行,而且目前正在逐步实现从 ESLint 配置文件读取数据。

在没有 Node.js 的环境下,你可以直接从最新的 GitHub 版本(https://github.com/oxc-project/oxc/releases/tag/oxlint_v0.0.20)去下载二进制文件。

易于阅读的检测结果

理解 linter 信息可能很多时候还是挺麻烦的,但是 Oxlint 旨在通过精确定位根本原因并提供有用的信息来简化这个过程,从而省去了阅读繁琐规则文档的需要,节省宝贵的时间。

我们还可以在 vscode 这个仓库中来运行 oxlint -D perf

538920423ab59541a7459003f808604b.png

整合规则

Oxlint 本身自己还没有提供插件系统,他的思路是整合来自所有热门插件的规则,如 TypeScript,React,Jest,Unicorn,JSX-a11yImport

插件在 JavaScript 生态系统中是非常重要的,所以目前 Oxlint  正在探究基于 DSL 的插件系统。

但是,大家可能会喜欢独立的 linter — 不需要管理插件依赖项的列表,不需要关注兼容性问题,或者由于版本限制而转向 forked 的插件。

命令

  • npx oxlint@latest --rules 获取所有内置规则列表;

  • npx oxlint@latest --help 获取所有配置说明。

Usage: oxlint [-A=NAME | -D=NAME]... [--fix] [PATH]...

Allowing / Denying Multiple Lints
  For example `-D correctness -A no-debugger` or `-A all -D no-debugger`.
  The default category is "-D correctness".
  Use "--rules" for rule names.
  Use "--help --help" for rule categories.
    -A, --allow=NAME          Allow the rule or category (suppress the lint)
    -D, --deny=NAME           Deny the rule or category (emit an error)

Enable Plugins
        --import-plugin       Enable the experimental import plugin and detect ESM problems
        --jest-plugin         Enable the Jest plugin and detect test problems
        --jsx-a11y-plugin     Enable the JSX-a11y plugin and detect accessibility problems

Fix Problems
        --fix                 Fix as many issues as possible. Only unfixed issues are reported in the
                              output

Ignore Files
        --ignore-path=PATH    Specify the file to use as your .eslintignore
        --ignore-pattern=PAT  Specify patterns of files to ignore (in addition to those in .eslintignore)
        --no-ignore           Disables excluding of files from .eslintignore files, --ignore-path flags
                              and --ignore-pattern flags

Handle Warnings
        --quiet               Disable reporting on warnings, only errors are reported
        --deny-warnings       Ensure warnings produce a non-zero exit code
        --max-warnings=INT    Specify a warning threshold, which can be used to force exit with an error
                              status if there are too many warning-level rule violations in your project

Miscellaneous
        --timing              Display the execution time of each lint rule
                              [env:TIMING: not set]
        --rules               list all the rules that are currently registered
        --threads=INT         Number of threads to use. Set to 1 for using only 1 CPU core

Codeowners
        --codeowners-file=PATH  Path to CODEOWNERS file
        --codeowners=NAME     Code owner names, e.g. @Boshen

Available positional items:
    PATH                      Single file, single path or list of paths

Available options:
    -h, --help                Prints help information

最后

大家觉得这个工具怎么样?欢迎在评论区留言。