33
0女生: 哈喽大家好欢迎收听，我们这一期的播客啊，然后咱们今天来聊一聊这个 ESLint。从怎么用，到一些实际的项目当中的集成，再到它的一些核心的原理啊，都给大家聊一聊。
男生: 好啊那我们就直接开始吧啊先给大家介绍一下什么是 ESLint 以及它的一些核心的概念。
女生: 今天咱们要聊这么几个大的板块啊第一个是 ESLint 它的一些基础的概念。第二个是 ESLint 的配置，怎么配，然后有哪些注意事项。第三个是 ESLint 在实际的项目当中，有哪些应用的场景，最后我们会再聊一聊 ESLint 它的一些。引擎的原理是怎么实现的。
男生: 嗯，听起来内容还挺多的对那我们就一点一点来啊先从第一个板块开始。
女生: 首先第一，第一个问题啊就是说 ESLint 它作为一个代码检查工具。它到底给我们带来了哪些好处，对吧为什么我们要使用它？
男生: 呃简单来说就是 ESLint 它是一个静态代码分析工具。它可以在不执行你代码的情况下，帮你去分析你的代码当中的一些潜在的问题或者说风格上的问题。对，然后它的好处我觉得有这么几点吧第一个是它可以帮你。强制执行一个团队的编码规范，就是大家都按照一个统一的风格来写代码这样的话会减少很多。因为风格不统一带来的一些麻烦。
女生: 听起来是一个非常好的团队协作的工具啊！
男生: 没错没错而且它还可以帮你在早期就发现一些错误比如说你有一些变量定义了但是没有使用啊。或者说有一些代码是根本就执行不到的呀。等等吧就是有很多这种问题他可以帮你发现，然后它最大的好处我觉得是可以帮你节省时间。就是你不用在 code review 的时候再去纠结一些风格上的问题。大家可以专注于一些更重要的事情。
女生: ESLint 它的核心设计理念是什么呢它是怎么做到这些事情的呢？
男生: 呃它的核心的设计理念我觉得就是它的完全可插拔性。就是它里面的每一条规则其实都是一个独立的插件。你可以在运行时去动态的添加。所以这就导致它有一个非常非常活跃的生态系统你可以找到很多。别人已经写好的插件或者说共享配置或者说解析器。然后你可以非常快速的去搭建一个你自己的 linting 的环境。
女生: 听起来扩展性确实非常强大呀！
男生: 是的是的对，然后它主要的几个核心的组件就是。解析器，插件和规则，嗯解析器的话它是可以把你的源代码转换成一个抽象语法树。 ESLint 默认是使用 Espree 这个解析器，但是你也可以自己去指定比如说你要 lint typescript 的话你可能就要用。tslint 这样的解析器，插件的话就是可以帮你扩展一些规则或者说一些配置。规则的话就是真正去检查你的代码的一些。逻辑，它的另外一个比较大的特点就是它的架构是非常模块化的。就是它的核心的检查引擎是和它的命令行工具是完全分开的。所以这也是为什么它可以非常容易的集成到各种开发工具当中。
女生: 那 ESLint 的配置系统它是怎么一步一步演进来的呢？
男生: 呃它早期的配置系统是一个级联的配置系统就是它会从你的被检查的文件的目录开始。一层一层的往上找配置文件然后把它们合并。这种方式的好处是非常灵活但是坏处就是你很难去调试。就是你不太清楚到底是哪个配置在起作用。
女生: 哦确实会带来一些困扰啊！
男生: 所以在 ESLint v9 之后他们就引入了一个新的扁平化的配置。就是你所有的配置都只存在于一个 eslint.config.js 的文件当中。然后你通过一个数组来导出你所有的配置对象。你也可以非常明确的去指定每个配置的作用范围。它也支持使用标准的 ES module 所以你可以在里面写一些动态的配置。呃我觉得这个也是更加符合现在的 JavaScript 生态的一个趋势。就是大家都希望配置是更直观的更明确的。
女生: 在 ESLint 的生态系统里面我们会有哪些比较常见的实践呢？
男生: 呃首先就是共享配置，嗯就是它是一个非常好的方式来共享一组规则。然后在社区里面也有很多非常流行的共享配置比如说 airbnb 的。standard 的还有 google 的，他们这些配置其实不仅仅是规则的不同他们其实是代表了不同的开发哲学。比如说 airbnb 它是一个非常全面的并且非常严格的一个配置。 standard 它是一个非常推崇约定优于配置的一个。极简的配置， google 的话它是一个比较折中的，就是它会希望。呃代码是比较简洁的又比较容易阅读的。
女生: 哦所以选择不同的配置还涉及到团队的一些风格的倾向啊！
男生: 对是的是的，然后另外一个就是插件，嗯就是 ESLint 的插件生态也是非常强大的。比如说你要 lint react 的代码的话就有 eslint-plugin-react.你要 lint vue 的代码的话就有 eslint-plugin-vue.他们也都有一些推荐的配置你可以直接使用。再有的话就是和 typescript 的集成，就是你需要使用 @typescript-eslint/parser 来解析你的 typescript 代码。同时你可能还需要安装 @typescript-eslint/eslint-plugin 来使用一些额外的 typescript 相关的规则。
女生: ESLint 它的内部的引擎的架构是什么样子的呢？
男生: 它的架构是非常模块化的一个架构嗯就是它的每一个部分都只负责一件事情。比如说它有一个 cli.js 就是它的命令行的入口。它只负责解析你命令行的参数，然后它有一个 ESLint 的类，它是一个比较高级的 API 它会帮你去统筹整个检查的过程。它有一个 Linter 就是它的核心的检查引擎，它只负责拿到你的代码和配置对它进行检查。它还有一些模块是专门用来存放规则的。还有一些模块是专门用来处理你的源代码的解析的。所以它的这种解耦就会让它非常容易去扩展或者说非常容易去维护。
女生: 听起来确实设计的非常精妙啊！
男生: 是的是的对然后这里面最重要的一个概念就是抽象语法树，嗯就是 ESLint 它是通过。把你的代码解析成一棵抽象语法树它的规则是基于这棵树来进行静态分析的。其实这也是整个现代的 JavaScript 工具生态的一个核心。就是大家都是通过这种方式来做到非常高效的对代码的检查和转换。
女生: 好的今天咱们聊了这么多啊从 ESLint 的基础概念到它的配置到它的一些生态系统的实践。然后再到它的核心的原理。呃希望大家对这个工具能够有一个比较全面的认识吧。
男生: OK 了那么以上就是这期播客的全部内容啦，感谢大家的收听，然后咱们下期再见拜拜！
