AST Explorer：在线语法树可视化工具

AST Explorer 是一个强大的在线工具，帮助开发者可视化和探索代码的抽象语法树（AST）。它支持多种编程语言和解析器，让你能够直观地理解代码是如何被解析和转换的。

什么是 AST

抽象语法树（Abstract Syntax Tree，简称 AST）是源代码的抽象语法结构的树状表示。编译器和转译器（如 Babel、TypeScript）都会先将代码解析成 AST，然后再进行转换或生成目标代码。

核心功能

多语言支持

AST Explorer 支持超过 40 种编程语言和解析器，包括：

• JavaScript: acorn、babel-eslint、espree、esprima、flow、recast、typescript 等
• CSS: css-tree、postcss、rework 等
• HTML: htmlparser2、parse5 等
• JSON: json-to-ast 等
• GraphQL: graphql-js 等
• Markdown: remark、markdown-it 等
• SQL: sqlite-parser 等

实时解析与可视化

在左侧编辑器粘贴代码，右侧会实时显示对应的 AST 结构：

• 点击 AST 节点可展开/折叠子树
• 鼠标悬停在节点上会高亮对应源代码位置
• Shift + 点击可展开整个子树

代码转换（Transform）

AST Explorer 不仅是查看工具，还支持编写代码转换规则：

• 支持多种转换工具：Babel、ESLint、JSCodeshift、Prettier 等
• 实时预览转换后的代码
• 方便开发和调试代码重构工具

分享功能

• 支持保存代码片段并生成分享链接
• 可导出为 GitHub Gist
• 方便团队协作和教学演示

使用场景

学习编译原理

对于想深入理解编译原理的开发者，AST Explorer 是最好的学习工具之一。通过可视化 AST，可以直观地看到：

• 代码是如何被分解成语法单元的
• 不同语法结构对应的 AST 节点类型
• 各种解析器之间的差异

开发 Babel 插件

Babel 插件开发需要深入理解 AST 结构。AST Explorer 提供了完美的开发环境：

1. 选择 "babel" 作为 transform 工具
2. 编写 visitor 函数
3. 实时查看转换效果

编写 ESLint 规则

自定义 ESLint 规则时，需要遍历 AST 检查代码模式。AST Explorer 可以帮助：

• 快速定位需要检查的节点类型
• 测试规则的匹配逻辑
• 验证修复代码的正确性

代码重构

使用 JSCodeshift 进行大规模代码重构时：

• 在 AST Explorer 中编写和测试 codemod
• 确保转换逻辑正确后再应用到项目
• 避免直接在生产代码上试错

界面说明

顶部工具栏

• Snippet: 保存和加载代码片段
• 语言选择: 切换编程语言（JavaScript、CSS、HTML 等）
• Parser 选择: 选择具体的解析器实现
• Transform 开关: 启用/禁用代码转换模式

左侧面板

代码编辑器，支持语法高亮和自动补全。默认包含示例代码，展示了 AST Explorer 的基本用法。

右侧面板

AST 可视化树，显示代码的抽象语法树结构。提供多种显示选项：

• Autofocus: 自动聚焦到当前选中的节点
• Hide methods: 隐藏方法属性，简化视图
• Hide empty keys: 隐藏空值属性
• Hide location data: 隐藏位置信息（start、end 等）
• Hide type keys: 隐藏类型键

底部信息

显示解析耗时和使用的技术栈（React、Babel、CodeMirror 等）。

支持的解析器一览

JavaScript/TypeScript

CSS

其他语言

• GraphQL: graphql-js、graphql-tools
• Markdown: remark、markdown-it、unified
• HTML: htmlparser2、parse5
• JSON: json-to-ast
• SQL: sqlite-parser、pg-query-parser

最佳实践

选择合适的解析器

不同解析器生成的 AST 结构可能不同：

• 开发 Babel 插件 → 选择 babel 解析器
• 开发 ESLint 规则 → 选择 espree 或 @typescript-eslint/parser
• 需要类型信息 → 选择 TypeScript 解析器
• 保留代码格式 → 选择 recast

利用 Transform 模式

编写代码转换时：

1. 先在 AST Explorer 中验证思路
2. 使用 console.log 调试节点信息
3. 确认无误后再集成到项目中

分享和保存

• 重要示例保存为 snippet
• 教学演示使用分享链接
• 复杂转换逻辑导出为 Gist 备份

项目信息

• GitHub: https://github.com/fkling/astexplorer
• 在线使用: https://astexplorer.net/
• 技术栈: React、Babel、CodeMirror、Express、webpack

AST Explorer 是每位前端开发者工具箱中不可或缺的利器，无论是学习编译原理、开发代码转换工具，还是进行代码重构，它都能大大提高效率。