# 前言
大家一起学习探讨 三大开发环境利器 ESLint, EditorConfig 和 Babel, 前两者属于代码规范，最后一个属于JavaScript的编译器。
浅谈 Babel 的 AST 编译过程，以及Babel 的 Plugin 和 Preset 的区别。
如何搭建项目开发静态代码检查规范，大厂的开箱即用的 EditorConfig 配置规则。
把三个知识点放在一起更好配合下文的React项目开发环境搭建实践。
# Babel + React 开发环境
# 理解 Eslint 和 EditorConfig
ESLint 是一种可组装的 JavaScript 和 JSX 检查工具。 完全可配置，可以自定义每一个规则。
EditorConfig 是一个跨编辑器的项目统一编码样式管理规范，由文件定义格式和文本编辑插件格式。
# 理解 Babel
Babel 是一个代码编译器，输入代码编译输出代码 (source code => output code)。
# 开箱即用的 EditorConfig 配置规则
# 所有文件匹配
[*]
indent_style = space # 缩进样式
end_of_line = lf # 结束换行，cr回车
indent_size = 2 # 缩进2个空格
charset = utf-8 # 文件utf-8编码
trim_trailing_whitespace = true # 去掉末尾空格
insert_final_newline = true # 在最后插入一个新行
# md文件匹配
[*.md]
trim_trailing_whitespace = false # 取消去掉末尾空格
在 VSCode 编辑器下要首先要下载 EditorConfig 插件，然后配置代码样式规划：
# Babel编译原理
# AST语法解析实例
通过 AST 树形描述了表达式的语法结构。例如变量声明 （VariableDeclaration），字符穿字面量 （StringLiteral） 及值 （value）等等。
如下是 AST 编译器地址：AST链接地址
# Babel编译过程
abel 的三个主要处理步骤分别是： 解析（parse），转换（transform），生成（generate）。原理不是本章重点，具体可以查看参考文档[Babel插件指南]。
-
解析： 解析步骤接收代码并输出 AST。 这个步骤分为两个阶段：词法分析（Lexical Analysis和 语法分析（Syntactic Analysis）。
- 词法解析： 词法分析阶段把字符串形式的代码转换为令牌（tokens） 流。
- 语法解析： 语法分析阶段会把一个令牌流转换成 AST语法书的形式。
-
生成： 代码生成步骤把最终（经过一系列转换之后）的 AST转换成字符串形式的代码，同时创建源码映射（source maps）。
- 代码生成其实很简单：深度优先遍历整个 AST，然后构建可以表示转换后代码的字符串
# Babel基础配置
Babel 是一个工具链，主要用于在旧的浏览器或环境中将 ECMAScript 2015+ 代码转换为向后兼容版本的 JavaScript 代码。
# babel-cli 命令行转换工具
# 工具安装
$ npm i babel-cli -g
# 转码结果输出到标准输出
$ 
