ESLint 最新升级,支持 JSON 和 Markdown 只是变革的开始

967 阅读4分钟

00. 写在前面

大家好,我是大家的林语冰。

本月月初,ESLint 之父在朋友圈爆料,ESLint 最新版本正式支持 JSON 和 Markdown 的 linting(代码质保)!👍

00.png

从此以后,除了 JS 和 TS 等文件,JSON 和 Markdown 中的代码质保也可以通过 ESLint 统一维护了。

所以,本文我们也要与时俱进,深度学习新版 ESLint 支持 JSON 和 Markdown 的技术细节:

  1. 如何使用 ESLint 维护 JSON 的代码质量
  2. 如何使用 ESLint 维护 Markdown 的代码质量

01. ESLint + JSON

JSON 全称 JS Object Notation(JS 对象简谱),是 JS 的严格子集,所以使用 ESLint 来维护 JSON 天经地义。ESLint 团队推荐使用官方支持的 @eslint/json 插件。

第一步,安装 @eslint/json 作为开发依赖,以下命令大家按需自选其一,粘贴执行就欧了:

01-json.png

⛔注意,这个插件 强制要求 eslint@>=9.6

如果插件安装失败或配置无效,那大概率是项目中当前的 ESLint 版本太低,及时升级就欧了。

第二步,在 ESLint 的配置文件中(比如 eslint.config.js 等),添加 JSON 插件的配置,如下所示:

02-json-recm.png

⛔注意,这里我们故意配置忽略 package-lock.json,这种依赖锁定文件一般会在安装依赖时自动生成,所以我们不推荐手动更改它。

此外,我们启用了 ESLint 官方推荐的内置规则。

举个栗子,ESLint 内置了 no-duplicate-keys 规则,这禁止 JSON 存在同名属性,举个栗子:

03-json-key.png

这种场景下,当且仅当 JSON 存在重复键名时,ESLint 就会自动识别并报错。

如果你或者你的团队不想使用 ESLint 官方推荐的内置规则,也可以自定义规则或编写插件:

04-json-rule.png

使用 ESLint 处理 JSON 的另一个冷知识是,我们容易混淆 @eslint/jsoneslint-plugin-json 这两个名称相似的插件。

⛔注意,永远使用 ESLint 官方支持的 @eslint/json 插件!!!

为什么呢?首先,@eslint/json 不仅支持 JSON 文件,还支持 JSONC 和 JSON5 等,后两者是 JSON 的扩展文件格式,它们在 JSON 之上添加了注释等功能。

举个栗子,JSONC 就是我们在 VSCode 中使用注释的 JSON 格式。

05-jsonc.png

其次,eslint-plugin-json 虽然可以解析并捕获 JSON 的语法错误,但它不会创建 AST(抽象语法树),我们无法为它编写自定义规则。

@eslint/json 允许我们编写自定义规则,更加灵活且强大。

02. ESLint + Markdown

喜欢 Markdown 的小伙伴一定有遭遇类似的用户体验,在 Markdown 中写代码时,有时会因为自动排版的迷之自信,而忽略了隐藏的代码质量问题。

举个栗子,假设我们在写作时写了下列代码:

06-md-var.png

上述代码明显问题重重,但以前 ESLint 并不会有“FBI Warning”,因为它无法处理 Markdown 中的代码块,毕竟它叫 ESLint 不叫 MarkLint...

在新版 ESLint 的辅助下,我们就不会再犯这种低级失误了。

为了支持 Markdown,ESLint 团队推荐使用官方支持的 @eslint/markdown 插件,它是 eslint-plugin-markdown 的下一代插件,同时支持 CommonMark 和 GitHub 风格的 Markdown 的解析和规则。

第一步,安装 @eslint/markdown 作为开发依赖,粘贴执行就欧了:

07-md.png

⛔注意,这个插件 强制要求 eslint@>=9

第二步,在 ESLint 的配置文件中(比如 eslint.config.js 等),添加 Markdown 插件和官方推荐规则,如下所示:

08-md-recm.png

和 JSON 插件类似,Markdown 插件也允许自定义规则。

09-md-rule.png

这里的 no-duplicate-headings 规则禁止重复标题,这个规则甚至与 JS 代码块无关。

因为除了处理 Markdown 中的代码块,Markdown 插件还内置了若干 Markdown 相关的规则,举个栗子:

10-md-err.png

在这种场景下,当且仅当 Markdown 存在重复标题时,ESLint 就会自动识别并报错。

⛔注意,@eslint/markdown 插件能且仅能发出警告,无法自动排版。

对此,ESLint 团队推荐使用 Prettier 等格式化工具来自动排版。

高潮总结

在使用最新版本 ESLint 维护 JSON 和 Markdown 的代码质量时,我们需要了解若干注意事项:

  • ESLint 官方插件优先
  • ESLint 版本及时升级

目前,ESLint 团队计划将 ESLint 打造为一个能够对 任何语言 进行 lint 分析的通用型 linter 工具。

可以预见,支持 JSON 和 Markdown 只是变革的开始,之后 ESLint 肯定还有其他语言功能的增量更新,到时我们再分享其他语言插件的技术细节。

参考文献

  1. ESLint Blogeslint.org/blog/2024/1…
  2. ESLint JSON GitHubgithub.com/eslint/json
  3. ESLint Markdown GitHubgithub.com/eslint/mark…

粉丝互动

本期话题是:如何看待新版 ESLint 支持 JSON + Markdown?你可以在本文下方自由言论,或者友情转发。🥳

欢迎持续关注我,深度学习更多前端进阶的技术细节。谢谢大家的点赞和转发,我们下期再见~👍