AST Explorer 和可视化指南：深入理解抽象语法树
你是否曾经想过，你的代码编辑器是如何知道你出现了语法错误的？或者 ESLint 是如何自动修复你的代码的？答案就在于 抽象语法树 (AST)。AST 是源代码结构的树状表示，它是 Babel、Prettier 和 TypeScript 等现代 Web 开发工具的基石。
1. 什么是抽象语法树 (AST)？
当编译器或工具读取你的源代码时，它不仅仅将其视为一长串文本。相反，它会经历几个阶段：
- 词法分析 (Tokenizing)：将代码分解为“令牌”（例如关键字、标识符、运算符）。
- 语法分析 (Parsing)：将这些令牌排列成反映语言语法的树结构。
由此产生的 AST 剥离了注释、空格和分号等不必要的细节（因此称为“抽象”），并专注于代码不同部分之间的结构关系。
2. 为什么 AST 对编译器、Linter 和格式化工具有用？
AST 是分析或转换代码工具的通用语言：
- 编译器（如 Babel、TypeScript）：在生成最终 JavaScript 之前，将一个版本的 AST（如 ES6）转换为另一个版本（如 ES5）。
- Linter（如 ESLint）：遍历 AST 以查找违反规则的模式（例如“no-unused-vars”），甚至可以修改树以“自动修复”错误。
- 格式化工具（如 Prettier）：将你的代码解析为 AST，然后根据一组一致的规则从头开始重新生成代码，忽略你原来的格式。
3. 可视化 JS、TS 和 CSS 的 AST
不同的语言使用不同的 AST 规范：
- JavaScript/TypeScript (ESTree)：大多数 JS 工具遵循 ESTree 规范。在这个树中，变量声明表示为
VariableDeclaration节点，其中包含VariableDeclarator节点。 - CSS (PostCSS/CSSTree)：CSS 也会被解析为 AST。PostCSS 等工具使用它来处理浏览器前缀、变量和嵌套。
4. 如何使用 AST Explorer
理解 AST 的最佳方法是亲眼看到它的运行。AST Explorer (astexplorer.net) 是开发者必备的在线工具。
- 粘贴代码：将你的代码片段放入左侧窗格。
- 选择解析器：选择语言（JavaScript、CSS、JSON 等）和解析器（例如
@babel/parser、typescript）。 - 检查树：点击代码的不同部分，在右侧的树结构中查看相应的节点。
5. 由 AST 驱动的常见工具
- Babel：转译 JavaScript 的行业标准。
- ESLint：最流行的 Linter，使用
espree解析器创建 AST。 - Prettier：一个固执的代码格式化工具，使用多个解析器（Babel、TypeScript、Flow）来构建 AST。
- SWC：一个快速的基于 Rust 的编译器，也使用 AST 进行转换。
常见问题 (FAQ)
Q: 什么是解析器 (Parser)？
A: 解析器是接收源代码作为输入并产生 AST 作为输出的软件片段。例如 Acorn、Babel Parser 和 Esprima。
Q: 源码映射 (Source Map) 和 AST 有什么区别？
A: AST 是用于分析和转换的结构化表示。源码映射是一个映射文件，它告诉浏览器转换/压缩后的代码如何映射回原始源代码，以便于调试。
Q: 我可以使用 AST 构建自己的 Linter 吗？
A: 可以！ESLint 等工具允许你编写自定义规则。你可以定义一个访问者函数，它“访问”AST 中的特定节点类型，并在满足某些条件时报告错误。
相关工具
- 代码压缩工具：了解如何通过转换和简化 AST 来压缩代码。
- JSON 格式化工具：将你的 JSON 数据结构可视化为清晰、交互式的树。