00. 写在前面

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

本月月初，ESLint 之父在朋友圈爆料，ESLint 最新版本正式支持 JSON 和 Markdown 的 linting（代码质保）！

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

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

如何使用 ESLint 维护 JSON 的代码质量如何使用 ESLint 维护 Markdown 的代码质量01. ESLint + JSON

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

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

粉丝请注意，这个插件 强制要求 eslint@>=9.6。

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

第二步，在 ESLint 的配置文件中（比如 eslint.config.js 等），添加 JSON 插件的配置，如下所示：

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

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

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

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

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

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

粉丝请注意，永远使用 ESLint 官方支持的 @eslint/json 插件！！！

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

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

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

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

02. ESLint + Markdown

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

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

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

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

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

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

粉丝请注意，这个插件 强制要求 eslint@>=9。

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

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

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

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

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

粉丝请注意，@eslint/markdown 插件能且仅能发出警告，无法自动排版。

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

高潮总结

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

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

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

参考文献ESLint Blog：/blog/2024/1…ESLint JSON GitHub：/eslint/jsonESLint Markdown GitHub：/eslint/mark…粉丝互动

本期话题是：如何看待新版 ESLint 支持 JSON + Markdown？你可以在本文下方自由言论，或者转发分享。