我的 React Native 技能樹點亮計劃 の 為 React Native 開發準備的 VS Code 外掛
作者簡介：ASCE1885 的 Github 簡書 微博 CSDN 知乎，
《Android高階進階》作者，微信公眾號 asce1885，專注與原創或者分享 Android，iOS，React Native，Web 前端移動開發領域高質量文章，主要包括業界最新動態，前沿技術趨勢，開源函式庫與工具等。我的小密圈已開通，《Android高階進階》一書的讀者可免費加入，更詳細的內容見這篇文章。
在《我的 React Native 技能樹點亮計劃 の React Native 開發 IDE 選型和配置》 和 《最好用的 Visual Studio Code 特性和外掛》 這兩篇文章中，我們對 Visual Studio Code 的特性和在 React Native 中的簡單配置有了一定的瞭解，但針對 React Native 開發而言，還不夠詳細，本文就來詳細探討如何更好的為 React Natiev 開發定製 VSCode。
React Native Tools1
微軟官方為 React Native 開發提供的專門的外掛，按照官網的說明進行外掛的安裝即可。這個外掛使得開發者可以在 VS Code 中除錯 React Native 程式碼，快速執行 react-native 命令，以及對 React Native 的 API 具備智慧提醒功能，如下所示：
Flow Language Support2
Flow3 是 Facebook 出品的一個用於 JavaScript 程式碼靜態型別檢查的工具，可以用來發現 Javascript 程式碼中的型別錯誤。這個外掛是在 VS Code 中支援 Flow 的外掛，當然前提是安裝好 Flow。
ESLint4
靜態程式碼檢查主要用來對程式碼的程式設計規範，語法錯誤等進行掃描，從而在程式碼執行之前發現可能存在的問題。在程式設計領域，幾乎每一種語言都有配套的靜態程式碼檢查工具，例如 C 和 C++ 語言的 PC-lint5 和 FlexeLint6，Java 語言的 FindBugs7，Android 開發中的 Android Lint，iOS 開發中的 OClint8 等等。React Native 開發中大部分時間都是使用的 Javascript 語言，類似其他語言，Javascript 也有自己的靜態程式碼檢查工具，而其中目前應用最廣的就是 ESLint，這個外掛就是將 ESLint 整合進 VS Code 的外掛，當然前提是需要安裝好 ESLint
Prettier - JavaScript formatter10
每個公司每個團隊都有自己的編碼規範，而程式碼格式化功能是提高開發者輸出符合規範程式碼效率的工具，這個外掛是在 VS Code 中支援 Prettier 的外掛，Prettier11 是一個 Javascript 程式碼的格式化工具。
Auto Close Tag12
提高開發效率的外掛，在 VS Code 中支援自動補全 HTML/XML 關閉標籤。
Auto Rename Tag13
提高開發效率的外掛，在 VS Code 中支援重新命名 HTML/XML 對應標籤。
Color Highlight14
程式碼中經常會出現設定顏色，通常是用十六進位制格式來表示一個顏色值，例如 #EB6066，但這個值對開發者而言是沒有意義的，我們看不出來到底對應的是什麼顏色，這個外掛幫忙開發者在 VS Code 中支援十六進位制格式的顏色進行預覽。
Document This15
在 VS Code 中支援在 TypeScript 和 JavaScript 檔案中自動生成 JSDoc 註釋的外掛。
Git Blame16
在團隊多人協作開發過程中，我們通常需要知道某行程式碼最近一次是誰修改的，Git Blame 外掛就提供了這麼一個便利的功能。
Rainbow Brackets17
在 React Native 開發中經常會存在多種括號混合使用，為了能夠更好的區分，這個外掛支援不同型別的括號進行彩色著色，支援圓括號，方括號和花括號。
React-Native/React/Redux snippets for es6/es718
在 VS Code 中支援 React Native，React，Redux 常見程式碼片段的外掛。
TODO Highlight19
在 VS Code 中支援 TODO:，FIXME: 等型別註釋關鍵詞高亮的外掛。
Path Intellisense20
在 VS Code 中支援自動補全檔案路徑名的外掛。
AutoFileName21
另一個自動補全檔名的外掛，如下所示：
EditorConfig22
EditorConfig23 通過在工程中增加一個配置檔案以及安裝對應的外掛，實現在不同編輯器和 IDE 保持工程中程式碼檔案編碼格式的一致性，EditorConfig 的配置檔案具有良好的可讀性，並能很好的和版本控制系統一起協作。更詳細內容可以參見《我的 React Native 技能樹點亮計劃 の 程式碼風格統一工具 EditorConfig》一文。