01
课程导学与项目概览
前端设计规范的重要性 · 工具能解决什么问题 · 整体架构预览
导学概览
02
开发环境搭建
Node.js与npm安装 · VS Code配置 · Git版本管理初始化
环境工具
03
项目初始化与工程结构设计
使用npm init创建项目 · 目录结构规划 (src, config, test等)
工程结构
04
核心概念：AST（抽象语法树）入门
什么是AST · 为什么用它做规范检查 · 在线AST解析工具使用
AST原理
05
词法分析与语法分析基础
JavaScript词法分析原理 · 语法分析流程 · Token的概念
词法语法
06
使用@babel/parser解析代码
安装与配置 · 解析JS/JSX文件 · 生成AST并打印
babel解析
07
AST节点遍历与访问者模式
使用@babel/traverse遍历AST · 访问者模式设计 · 节点路径(path)概念
遍历模式
08
规则引擎设计（一）：规则接口定义
规则的结构 (meta, create) · 规则上下文(context)设计
引擎接口
09
规则引擎设计（二）：规则注册与调度
规则管理器实现 · 规则优先级 · 批量运行规则
调度注册
10
规则引擎设计（三）：错误报告与修复建议
错误对象设计 · 定位信息（行/列） · 自动修复提示
报告修复
11
第一个规则：禁止var声明
编写规则逻辑 · 检测VariableDeclaration节点 · 生成错误报告
规则var
12
第二个规则：强制使用===代替==
检测BinaryExpression节点 · 处理特殊情况（null判断）
规则相等
13
第三个规则：禁止console.log提交
检测CallExpression节点 · 忽略注释标记
规则console
14
第四个规则：组件命名规范（大驼峰）
检测JSXIdentifier节点 · 正则匹配校验
规则命名
15
第五个规则：禁止魔法数字
检测NumericLiteral节点 · 允许白名单数字 (0,1)
规则魔法数字
16
规则配置化：从配置文件读取规则
JSON/JS配置文件设计 · 规则参数传递（options）
配置文件
17
CLI命令行工具开发（一）
使用commander.js搭建CLI · 参数解析 (--config, --fix)
CLI命令行
18
CLI命令行工具开发（二）
文件遍历与过滤 · glob模式匹配 · 忽略node_modules · 支持通配符
遍历过滤
19
CLI命令行工具开发（三）
输出格式化 · stylish格式 · json格式 · 支持输出到文件
输出格式化
20
自动修复功能实现
fixer对象设计 · 替换AST节点 · 生成修复后的代码
修复AST
21
插件系统设计
插件接口定义 · 动态加载外部规则 · 插件市场概念
插件扩展
22
测试驱动开发
使用Jest编写单元测试 · 测试规则逻辑 · 测试CLI功能
测试Jest
23
持续集成与自动化
配置GitHub Actions · 每次提交自动运行检查 · 生成检查报告
CI自动化
24
性能优化
大文件检查优化 · 增量检查 · 缓存机制
性能缓存
25
与编辑器集成
VS Code插件开发入门 · 通过LSP协议集成 · 实时检查反馈
编辑器LSP
26
自定义规则实战
团队内部规范落地 · 从业务场景提炼规则 · 规则文档编写
实战规范
27
错误处理与边界情况
文件编码问题 · 语法错误处理 · 超大文件处理策略
错误边界
28
日志与调试
使用debug模块 · 规则执行日志 · AST可视化调试
日志调试
29
发布与版本管理
npm包发布流程 · 语义化版本 · CHANGELOG编写
发布版本
30
课程总结与未来展望
工具生态回顾 · WebAssembly扩展 · AI辅助规范检查趋势
总结趋势