ESLint 推陈出新，支持 JSON 和 Markdown 只是变革的开始

00. 写在前面

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

今年七月，ESLint 团队就爆料了 ESLint 的未来计划，想要将 ESLint 打造为一个更通用的 Linter（代码质保工具），能够对任何语言进行 lint 分析。

ESLint 中的查找文件、解析、报告问题等一大坨核心功能都比较通用，因此在过去的几个月里，ESLint 一直致力于从核心源码中提取 JS 专属的部分。

今天，这项工作已经码到功成，ESLint 现在可以同时对 JSON 和 Markdown 进行 lint（代码质保），不再局限于 JS 和 TSX 等文件。

免责声明

本文乃 AI 翻译 + 真人删改，仅供粉丝参考。英文原味版请传送 ESLint now officially supports linting of JSON and Markdown。

01. 使用 @eslint/json 对 JSON 进行 lint

JSON 使用 @eslint/json 插件来 lint，该插件是官方支持的语言插件，提供了 JSON、JSONC（允许注释的 JSON）和 JSON5 的解析。

要使用该插件，请从 npm 安装它：

bash 复制代码

npm install @eslint/json -D

然后更新你的配置文件：

js 复制代码

import json from '@eslint/json'

export default [
  {
    plugins: {
      json,
    },
  },
  // JSON 代码质保
  {
    files: ['**/*.json'],
    language: 'json/json',
    rules: {
      'json/no-duplicate-keys': 'error',
    },
  },
]

该插件内置了若干规则，关于配置 JSON lint 的更多技术细节，请查看结尾分享的官方仓库链接。

02. 使用 @eslint/markdown 对 Markdown 进行 lint

Markdown 使用 @eslint/markdown 插件来 lint，该插件是只包含处理器的 eslint-plugin-markdown 的下一代插件。

这个官方支持的新语言插件具有 CommonMark 和 GitHub 风格的 Markdown 的解析和规则。

要使用该插件，请从 npm 安装它：

bash 复制代码

npm install @eslint/markdown -D

然后更新你的配置文件：

js 复制代码

// eslint.config.js
import markdown from '@eslint/markdown'

export default [
  {
    files: ['**/*.md'],
    plugins: {
      markdown,
    },
    language: 'markdown/commonmark',
    rules: {
      'markdown/no-html': 'error',
    },
  },
]

与 JSON 插件类似，这个插件也内置了若干规则，关于配置 Markdown lint 的更多技术细节，请查看结尾分享的官方仓库链接。

03. 创建自定义规则和使用 Code Explorer

@eslint/json 和 @eslint/markdown 都将源码解析为 AST（抽象语法树），然后遍历 AST 来运行规则，这跟 ESLint 对 JS 的处理殊途同归。

这意味着，你可以为 JSON 和 Markdown 编写自定义规则，就像为 JS 编写自定义规则一样。

主要区别在于 AST 格式。JSON 使用 Momoa AST，而 Markdown 使用 mdast。

由于 ESLint 社区没有丰富资源可以辅助你浏览其他 AST 格式，因此 ESLint 团队推出了 Code Explorer（代码浏览器）。

Code Explorer 允许你浏览不同语言的 AST，可以辅助你创建自定义规则。

对于 JSON 和 Markdown，你将获得 AST 的扩展视图，而对于 JS，你不仅可以浏览 AST，还可以浏览 ESLint 在解析代码时生成的作用域和代码路径信息。

今后，ESLint 团队将继续更新 Code Explorer 的新语言和功能，辅助你创建自定义规则。

04. 编写您自己的语言插件

ESLint 语言的设计方式是，它们可以使用新的 languages 键包含在任何插件中。

@eslint/json 和 @eslint/markdown 插件不仅分别支持 JSON 和 Markdown，还作为如何自定义语言插件的示例。你可以查看语言文档，了解如何创建自己的语言。

高潮总结

在 ESLint 发展路线上，JS 之外的其他语言需求已经由来已久，因此 ESLint 支持 JSON 和 Markdown 是一个巨大的里程碑。

我们的长期目标是确保 ESLint 可以检查你可能在 Web 项目中使用的任何类型的文件，无论是使用官方支持的语言插件，还是使用社区编写的插件。

借助 JS、JSON 和 Markdown，我们已经在实现该目标的道路上勇往直前。

参考文献

ESLint Blog ：eslint.org/blog/2024/1...
ESLint JSON GitHub ：github.com/eslint/json
ESLint Markdown GitHub ：github.com/eslint/mark...

粉丝互动

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

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