最近由于換了環境，所以需要重新配置下 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 知道哪些文件發生了改動，那么我們只需要把這個文件的部分重新打包即可，這個時間就非?？炝恕?/p>
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 的開發環境也就搭建完成了??~
