当前位置:首页 > 科技  > 软件

Oxlint 会取代 Eslint 吗?

来源: 责编: 时间:2024-06-07 17:19:45 358观看
导读最近,一个基于 Rust 的代码检查工具 Oxlint 在国外前端社区引起了热议,许多专家对其给予了高度评价。那么,相比于它的大哥 Eslint,Oxlint 有哪些优势?它会在未来取代 Eslint 吗?本文将讨论这个话题。Oxc 和 OxlintOxlint 是

最近,一个基于 Rust 的代码检查工具 Oxlint 在国外前端社区引起了热议,许多专家对其给予了高度评价。那么,相比于它的大哥 Eslint,Oxlint 有哪些优势?它会在未来取代 Eslint 吗?本文将讨论这个话题。Bsu28资讯网——每日最新资讯28at.com

Oxc 和 Oxlint

Oxlint 是 Oxc 项目下的一个产品,Oxc 是一个用 Rust 实现的前端工具链集合,包括:Bsu28资讯网——每日最新资讯28at.com

  • Linter:即 Oxlint,可与 Eslint 相媲美,是本文的主角
  • Parser:即 oxc_parser,用于解析 .js(x) 和 .ts(x),可与 swc 媲美。基准测试声称其速度是 swc 的两倍

图片图片Bsu28资讯网——每日最新资讯28at.com

  • Resolver:解析 ESM 和 CJS 文件的路径,基准测试显示其速度比 webpack/enhanced-resolve 快 28 倍
  • Formatter:基准测试对比 Prettier,尚未公布
  • Transpiler:对比 Babel 用于将高级语法转为低级语法,尚未公布
  • Minifier:代码压缩工具,尚未公布

除了与 Oxc 具有相同设计理念的工具(所有工具链工具均基于 Rust 开发)之外,还有 Biome 和 Ruff:Bsu28资讯网——每日最新资讯28at.com

  • Biome:其前身是由 Babel 作者 Sebastian McKenzie 开发的 Rome。目标语言是 JS
  • Ruff:目标语言是 Python

Oxlint 介绍

Oxlint 引发热议的主要原因是其爆炸性的性能。Bsu28资讯网——每日最新资讯28at.com

图片图片Bsu28资讯网——每日最新资讯28at.com

我使用 Apple M1 Pro 32G 运行一个包含约 50 个文件的小项目,仅用了 18ms,官方声称其基准测试中比 Eslint 快 50-100 倍的说法并非虚言。Bsu28资讯网——每日最新资讯28at.com

图片图片Bsu28资讯网——每日最新资讯28at.com

当然,除了性能优势外,Oxlint 与 Eslint 还有许多不同之处。接下来,我们将从三个方面比较 Oxlint 和 Eslint:Bsu28资讯网——每日最新资讯28at.com

易用性

Eslint 诞生于 2013 年。相比于竞争对手(如 JSHint),其最大的优势在于提供大量可选规则,并在某些场景下可以自动修复不符合规则的代码。Bsu28资讯网——每日最新资讯28at.com

然而,随着时间推移,这一优势逐渐变成劣势——开发者不再需要大量自定义规则,而是需要基于最佳实践的开箱即用规则集。许多新产品正是基于这一概念而诞生的,如:Bsu28资讯网——每日最新资讯28at.com

  • Prettier:仅检查和格式化代码风格
  • eslint-plugin-antfu:Antfu 自定义规则集的版本

Oxlint 借鉴了上述产品的优势,提供了一套开箱即用的默认规则。这套规则主要关注代码的正确性(如语法错误、冗余代码和容易引起误解的语法),而不是优化代码细节(如语法性能或风格)。Bsu28资讯网——每日最新资讯28at.com

因此,只需要在项目中执行以下命令即可满足常规验证:Bsu28资讯网——每日最新资讯28at.com

npx oxlint@latest

在易用性方面,Oxlint 远胜于 Eslint。Bsu28资讯网——每日最新资讯28at.com

可读性诊断

当代码检查工具检测到问题时,它会向开发者提供相关信息。Eslint 提供的信息通常很简短,只告诉你错误的原因。例如,对于以下代码:Bsu28资讯网——每日最新资讯28at.com

let a;

通过信息 "a is defined but never used",我们可以知道错误的原因是变量 a 被定义但未使用。Bsu28资讯网——每日最新资讯28at.com

然而,如果是更复杂的规则,简短的信息可能无法直观地表达错误发生的位置和解决方法。许多时候,我们仍需查看规则文档,了解该规则的具体含义,然后结合错误代码进行分析。Bsu28资讯网——每日最新资讯28at.com

相比之下,Oxlint 提供的信息更加直观和准确。例如,执行以下代码后,会得到一个倍增数的数组:Bsu28资讯网——每日最新资讯28at.com

const numbers = [1, 2, 3, 4, 5];const result = numbers.reduce((accumulator, current) => {  return [...accumulator, current * 2];}, []);// [ 2, 4, 6, 8, 10 ]console.log(result);

每次 reduce 回调执行时,数组都会扩展,当数组很长时,这会导致性能问题。Bsu28资讯网——每日最新资讯28at.com

针对这个问题,Oxlint 的信息包括三部分:Bsu28资讯网——每日最新资讯28at.com

  • 错误原因
  • 错误具体发生的位置
  • 解决方法

图片图片Bsu28资讯网——每日最新资讯28at.com

通过查看代码中的哪个 reduce 操作(紫色字体)和哪个扩展操作(青色字体),我们可以识别问题。Bsu28资讯网——每日最新资讯28at.com

虽然有些人可能会说,如果项目很大,阅读如此详细的 lint 信息是一种头疼的事。Bsu28资讯网——每日最新资讯28at.com

但我们需要知道——你可以提供它,但我不一定要使用它,不使用它与不能提供它是完全不同的概念。Bsu28资讯网——每日最新资讯28at.com

在诊断可读性方面,Oxlint 优于 Eslint。Bsu28资讯网——每日最新资讯28at.com

参与成本

参与成本指的是开发者自定义规则的成本。Oxlint 是用 Rust 编写的,如果开发者需要用 Rust 来编写自定义规则,成本会很高。相比之下,Eslint 的规则是用 JS 编写的,成本要低得多。Bsu28资讯网——每日最新资讯28at.com

Oxlint 尝试从两个方面解决这个问题:Bsu28资讯网——每日最新资讯28at.com

不需要自己编写,官方已经编写了常用规则。Bsu28资讯网——每日最新资讯28at.com

截至本文撰写时,官方已经实现了大约 200 多条规则。从规则的名称可以看出,这些规则是从各种常见库的最佳实践中提取出来的,例如:Bsu28资讯网——每日最新资讯28at.com

  • jest: no-confusing-set-timeout
  • react: jsx-no-duplicate-props
  • eslint: default-case-last
  • typescript: no-unnecessary-type-constraint

实现专门为编写规则设计的 DSL。Bsu28资讯网——每日最新资讯28at.com

Oxlint 正在研发一种专门用于编写规则的 DSL。至于这个 DSL 何时发布以及效果如何,目前尚不清楚。Bsu28资讯网——每日最新资讯28at.com

从参与成本的角度来看,Eslint 完全胜出。Bsu28资讯网——每日最新资讯28at.com

Oxlint 会取代 Eslint 吗?

根据已知情况,Oxlint 规则参与成本高于 Eslint。只要这个问题没有解决,Eslint 支持的一些规则 Oxlint 就无法支持。因此,短期内完全取代 Eslint 是不现实的。Bsu28资讯网——每日最新资讯28at.com

然而,就像 Vite 相对于 Webpack,前者并未实现后者的所有功能。但只要满足 90% 开发者的常见需求,并提供更好的体验,就能吸引大多数 Webpack 用户。Bsu28资讯网——每日最新资讯28at.com

Oxlint 也是如此——它建议开发者先运行 Oxlint,然后在 lint-staged 或 CI 设置中运行 ESLint。这样,大多数常见问题在到达 ESLint 之前就被 Oxlint 阻止了。Bsu28资讯网——每日最新资讯28at.com

这种方法可以显著提高 lint 过程的速度,并且学习曲线很低。因此,它很可能在开发者中迅速流行。Bsu28资讯网——每日最新资讯28at.com

当这种方法变得流行时,随着 Oxlint 规则覆盖范围的增加,它将逐渐替代 Eslint 最常见的 90% 需求。Bsu28资讯网——每日最新资讯28at.com

到那时,会出现 Oxlint 为主,Eslint 为辅(处理少数特殊规则)的情况。Bsu28资讯网——每日最新资讯28at.com

从这个角度来看,Oxlint 有很大的胜算。Bsu28资讯网——每日最新资讯28at.com

尽管 Oxlint 前景光明,但它目前还有一些缺点,例如:Bsu28资讯网——每日最新资讯28at.com

框架语法:Oxlint 原生支持 js(x) 和 ts(x),但不支持 Svelte 或 Vue 模板语法。Bsu28资讯网——每日最新资讯28at.com

vscode 插件仍不稳定,有 bug。例如,在下面的代码中,警告应该在第 1 行和第 3 行,但第 2 行也被标记了。Bsu28资讯网——每日最新资讯28at.com

图片图片Bsu28资讯网——每日最新资讯28at.com

我相信,随着开发团队的持续投入和社区生态系统的形成,Oxlint 及其底层 Oxc 将拥有光明的未来。Bsu28资讯网——每日最新资讯28at.com

本文链接:http://www.28at.com/showinfo-26-92744-0.htmlOxlint 会取代 Eslint 吗?

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。邮件:2376512515@qq.com

上一篇: 宝贝,带上WebAssembly,换个姿势来优化你的前端应用

下一篇: 避免删库跑路的办法,你知道吗?

标签:
  • 热门焦点
  • 一加Ace2 Pro真机揭晓 钛空灰配色质感拉满

    终于,在经过了几波预热之后,一加Ace2 Pro的外观真机图在网上出现了。还是博主数码闲聊站曝光的,这次的外观设计还是延续了一加11的方案,只是细节上有了调整,例如新加入了钛空灰
  • 摸鱼心法第一章——和配置文件说拜拜

    为了能摸鱼我们团队做了容器化,但是带来的问题是服务配置文件很麻烦,然后大家在群里进行了“亲切友好”的沟通图片图片图片图片对比就对比,简单对比下独立配置中心和k8s作为配
  • 量化指标是与非:挽救被量化指标扼杀的技术团队

    作者 | 刘新翠整理 | 徐杰承本文整理自快狗打车技术总监刘新翠在WOT2023大会上的主题分享,更多精彩内容及现场PPT,请关注51CTO技术栈公众号,发消息【WOT2023PPT】即可直接领取
  • 一篇文章带你了解 CSS 属性选择器

    属性选择器对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。一、了解属性选择器CSS属性选择器提供了一种简单而
  • 梁柱接棒两年,腾讯音乐闯出新路子

    文丨田静 出品丨牛刀财经(niudaocaijing)7月5日,企鹅FM发布官方公告称由于业务调整,将于9月6日正式停止运营,这意味着腾讯音乐长音频业务走向消亡。腾讯在长音频领域还在摸索。为
  • 猿辅导与新东方的两种“归途”

    作者|卓心月 出品|零态LT(ID:LingTai_LT)如何成为一家伟大企业?答案一定是对“势”的把握,这其中最关键的当属对企业战略的制定,且能够站在未来看现在,即使这其中的
  • 新电商三兄弟,“抖快红”成团!

    来源:价值研究所作 者:Hernanderz 随着内容电商的概念兴起,抖音、快手、小红书组成的“新电商三兄弟”成为业内一股不可忽视的势力,给阿里、京东、拼多多带去了巨大压
  • 华为Mate 60系列用上可变灵动岛:正式版体验将会更出色

    这段时间以来,关于华为新旗舰的爆料日渐密集。据此前多方爆料,今年华为将开始恢复一年双旗舰战略,除上半年推出的P60系列外,往年下半年的Mate系列也将
  • AMD的AI芯片转单给三星可能性不大 与台积电已合作至2nm制程

    据 DIGITIMES 消息,英伟达 AI GPU 出货逐季飙升,接下来 AMD MI 300 系列将在第 4 季底量产。而半导体业内人士表示,近日传出 AMD 的 AI 芯片将转单给
Top