最近由于换了环境，所以需要重新配置下 Mac 系统的 React Native （后面简称为 RN）开发环境，在此就记录下怎么搭建一个舒服好用的 RN 开发环境。
目前自己使用的是 VS Code 作为开发的 IDE，RN 开发环境需要 Git、Node、watchman 和开发的IDE等等，因此就是按照这个顺序一步步介绍怎么搭建环境。
Homebrew
首先需要安装 Homebrew，Homebrew 是 Mac 系统的软件包管理器，可以方便的帮助我们安装所需的各种软件，一条指令就可以一键安装并配置软件所需的环境，节省了大量的时间。大家可以去 Homebrew官网 了解更多信息。
在终端中输入下面指令安装 Homebrew ：
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
安装成功后终端会提示如下，到此 Homebrew 的安装就成功了：
使用指令 brew --version 可以输出 Homebrew 的版本。
如果终端提示没有 brew，就需要让终端重新加载下配置文件。重启终端或者让终端重新加载配置，如果使用的是 Bash 终端输入 source ~/.bash_profile，使用的是 zsh 终端就输入 source ~/.zshrc。
使用指令 brew install xxx 就可以安装指定的软件，后面 Git 就可以使用 Homebrew
安装。
Git
Mac 系统默认是自带 Git ，但是一般都不是最新的版本。
如果我们想使用到最新版本的Git 可以使用 Homebrew 来安装或者去Git官网下载最新的版本安装。
使用 Homebrew 安装 Git
在终端中输入brew install git 就可以安装 Git，是不是很简单😊~ 安装完成后我们可以使用 git --version 来查看安装的 Git 版本。
使用Git 官网安装包安装
打开从官网下载的 dmg 安装文件 git-xxxx-intel-universal-mavericks.dmg，双击图示的 pkg 文件一路点击下去就可以安装完成，这个过程也是很简单的。
Node
Node 全名是 Node.js ，是一个基于Chrome V8 引擎的 JavaScript 运行时。在 Node 之前 JavaScript 是运行在浏览器环境中的，Node 的出现让我们可以在后台服务器或者终端上运行 JavaScript 代码，RN 开发所使用的本地服务器就是基于 Node 实现的。
在 Node 的中文官网中可以下载到 Node 的安装包，但是我并不推荐使用这个方式来安装。因为 Node 版本更新很快，有时候我们会在不同 Node 版本环境下进行开发，所以我们需要一个 Node 的安装工具方便以后升级和切换不同的 Node 版本，这里推荐使用 nvm 来安装 Node，在这里 可以找到关于 nvm 的说明。
通过 nvm 来安装 Node
安装 nvm 并使用 nvm 来安装 Node 的流程如下：
- 使用下面指令安装 nvm
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
- 重启终端或者使用 source 指令重新加载终端配置
在终端输入nvm会显示 nvm 支持的指令，其中需要我们注意的我使用红色箭头标识出来了；
- 使用指令
nvm ls-remote查看当前可以安装的 node 版本
在我写这篇时最新的版本是 v8.1.3，长期支持版本 LTS 是 v6.11.0。如果你追求新版本体验的话可以安装最新的版本，如果希望使用一个稳定的版本就安装 LTS 版本
- 使用指令
nvm install vx.x.x安装指定的 Node 版本
这里我安装的是稳定的v6.11.0版本，使用node -v就可以看到安装的 Node 具体版本。
到此我们就成功安装了 Node ，但是关于 Node 的事情还没有结束，我们需要升级下 npm 的版本。
npm 的简介与升级
在 Node 安装完成后会提示 Now using node v6.11.0 (npm v3.10.10) ，可以看到这里不仅仅存在一个 Node 的版本还有 npm 的版本，那么 npm 是啥呢？
npm 是 Node 的模块管理器，它的用途和前面提到的 Homebrew 非常一致，都是软件的管理器，方便我们安装自己想要的各种软件。有了 npm 我们就可以快速的安装一个他人已经写好的 Node 模块，从而减少我们的开发时间，用现成的轮子而不是自己从头开始写。
在 npm 的官网中我们可以搜索到各种他人已经写好的 node 模块，通过 npm 安装模块也十分简单：
# 安装 react 模块
npm install react
# 全局安装 react-native-cli 模块
npm install -g react-native-cli
这里我只简单列出了2种 install 指令的用法，第二条指令使用 -g 参数，那么这个参数有什么用呢?
npm 安装 node 模块分2种情况：
- 安装在当前目录下
比如你在一个空文件夹下执行npm install执行安装一个模块，你会发现他会在当前文件夹下生产一个node_modules文件夹，我们安装的react模块就放在这个node_modules中，在这种情况下我们就只能在当前路径下才能使用react模块。
- 安装在全局
使用-g参数后会把安装的 node 模块安装在全局上，使用这种方式安装的模块就可以在任意路径下使用了。一般使用这种方式安装的都是使用 node 编写的一些工具，例如我们后面需要安装的react-native-cli
通常我们要使用最新的 npm，npm 也是安装在全局的 node 工具模块，所以我们可以使用 npm 去升级 npm，感觉有点拗口啊。
使用下面的指令就可以完成 npm 的升级，升级完成后后可以使用 npm -v 查看升级后的 npm 版本。
npm install -g npm
** 注意: 使用 -g 安装的模块是安装在当前 node 版本的目录下的，如果你使用 nvm 切换或者安装新的 node 版本，那么你需要重新在新的 node 下重新安装一次**
React Native 命令行工具 (react-native-cli)
react-native-cli 的安装前面已经说过，直接使用 npm 安装在全局中：
npm install -g react-native-cli
安装完成后需要重新打开终端，或者使用 source 加载终端配置。
Watchman
watchman 是 Facebook 提供的监视文件变化的工具，在其官网上我们可以了解更多信息。
为什么需要安装 watchman呢，在开发 RN 我们会遇到这样的情况，第一次打开一个RN 过程时会等待很长时间，我们可以在终端中看到下面的这样的进度条：
这个时候终端起的 node server 正在将我们写的 RN 代码打包成一个单独的文件，由于使用了很多 node 模块，所以这个打包的过程会需要读取非常多的文件。
一旦我们修改了项目的代码就需要重新打包一次，如果没有 watchman 这类监视文件改动的工具，我们就只能重新把所有的文件
build 一次，这个时间就非常难接受了。而 watchman 的存在可以让本地的 server 知道哪些文件发生了改动，那么我们只需要把这个文件的部分重新打包即可，这个时间就非常快了。
watchman 使用 brew 安装：
brew install watchman
** 注意不要使用 npm 来安装 watchman，如果你在本地 server上看到下面的错误，很大的可能就是你的 watchman 是使用 npm 安装的，而这个 watchman 并不是我们想要的。请通过 npm uninstall watchman -g 卸载后重新使用 brew 来安装。**
Visual Studio Code
至此 RN 的开发环境就搭建完成，剩下的就是 IDE 的一些设置了，这里推荐使用 Visual Studio Code (VS Code)。VS Code 是微软推出的一款开源免费的编辑器，我们可以在他的官网 上下载安装。
修改VS Code语言
VS Code 默认使用的是系统的语言，如果你希望切换到英文界面可以使用下面的方式：
快捷键 ⌘(Command)+⇧(Shift)+p，打开命令面板，输入 language，选择配置语言 (Configure Language)，↩回车
修改 locale 为 en ，重启后则为英文，如果需要使用中文则重新设置为 zh-cn
安装终端 code 命令
快捷键 ⌘(Command)+⇧(Shift)+p，打开命令面板，输入shell，选择 在PATH 中安装 "code" 命令 (Install 'code' command in PATH)，↩回车
重启终端后我们就在终端中使用指令 code 来打开工程或者单个文件：
# 打开当前目录
code .
# 打开 1.txt 文件
code 1.txt
颜色主题
快捷键 ⌘(Command)+⇧(Shift)+p，打开命令面板，输入theme，选择 颜色主题 (Color Theme)，↩回车
这里推荐 Monokai 主题色
扩展插件的安装
点击下图箭头所示的地方可以安装我们需要的插件，推荐大家安装图示的插件。
一些插件会需要额外的配置，下面会列举出来
ESLint
ESLint 是 JavaScript 和 JSX 的检查工具，可以规范代码，发现编写代码工程中的问题，想了解更多细节可以去中文官网查看，为了正常的使用 ESLint 插件我们需要通过 npm 安装一些必备的模块：
# 安装 ESLint
npm install -g eslint
# 安装 ESLint 的 react 支持
npm install -g eslint-plugin-react
# 安装 ESLint 的 react native 支持
npm install -g eslint-plugin-react-native
使用 ESLint 之后就可以关闭 VS Code 自带的 TypeScript 检查了，使用快捷键 ⌘(Command)+, 打开配置配置文件，设置 javascript.validate.enable 属性为 false 即可。
每个项目都需要我们配置ESLint，为了生成 ESLint 的配置文件，我们可以在终端中使用 eslint --init
或者 快捷键 ⌘(Command)+⇧(Shift)+p，打开命令面板，输入eslint，选择Create '.eslintrc.json' File，个人是推荐这种方式哈~
但是生成的 .eslintrc.json 的配置还是不够完善，可以看到连默认的demo都会提示一些警告，而这些警告显然是不应该出现的，这就是因为 .eslintrc.json 对 RN 的配置还不够完善。
为了让 ESLint 更贴合 RN 的代码，这就需要使用到我们前面安装的 ESLint react 支持 和 react native 支持，在 .eslintrc.json 中添加如下配置，这个时候我们再回来看代码就不会出现这些错误的警告了。
上面的配置图中只列出了基本的一些配置，如果想了解更多可以点击这查看 ESLint react 支持 和 ESLint react native 支持
相信有了 ESLint 会让大家的 RN 开发更加规范~
至此一个 RN 的开发环境也就搭建完成了😊~
