作者簡(jiǎn)介：ASCE1885， 《Android 高級(jí)進(jìn)階》作者。

• 微信公眾號(hào)：asce1885
• 小密圈：Android高級(jí)進(jìn)階，詳情見這篇文章。
• Github，簡(jiǎn)書，微博，CSDN 知乎

cat.png

在《我的 React Native 技能樹點(diǎn)亮計(jì)劃 の React Native 開發(fā) IDE 選型和配置》 和 《最好用的 Visual Studio Code 特性和插件》 這兩篇文章中，我們對(duì) Visual Studio Code 的特性和在 React Native 中的簡(jiǎn)單配置有了一定的了解，但針對(duì) React Native 開發(fā)而言，還不夠詳細(xì)，本文就來詳細(xì)探討如何更好的為 React Natiev 開發(fā)定制 VSCode。

React Native Tools^[1]

MacHi 2017-05-01 18-38-52.png

微軟官方為 React Native 開發(fā)提供的專門的插件，按照官網(wǎng)的說明進(jìn)行插件的安裝即可。這個(gè)插件使得開發(fā)者可以在 VS Code 中調(diào)試 React Native 代碼，快速執(zhí)行 react-native 命令，以及對(duì) React Native 的 API 具備智能提醒功能，如下所示：

image_1ardliff01st41t5u19op1pgif129.png-153.7kB

Flow Language Support^[2]

MacHi 2017-05-01 18-42-22.png

Flow^[3] 是 Facebook 出品的一個(gè)用于 JavaScript 代碼靜態(tài)類型檢查的工具，可以用來發(fā)現(xiàn) Javascript 代碼中的類型錯(cuò)誤。這個(gè)插件是在 VS Code 中支持 Flow 的插件，當(dāng)然前提是安裝好 Flow。

ESLint^[4]

MacHi 2017-05-01 18-41-40.png

靜態(tài)代碼檢查主要用來對(duì)代碼的編程規(guī)范，語法錯(cuò)誤等進(jìn)行掃描，從而在代碼執(zhí)行之前發(fā)現(xiàn)可能存在的問題。在程序設(shè)計(jì)領(lǐng)域，幾乎每一種語言都有配套的靜態(tài)代碼檢查工具，例如 C 和 C++ 語言的 PC-lint^[5] 和 FlexeLint^[6]，Java 語言的 FindBugs^[7]，Android 開發(fā)中的 Android Lint，iOS 開發(fā)中的 OClint^[8] 等等。React Native 開發(fā)中大部分時(shí)間都是使用的 Javascript 語言，類似其他語言，Javascript 也有自己的靜態(tài)代碼檢查工具，而其中目前應(yīng)用最廣的就是 ESLint，這個(gè)插件就是將 ESLint 集成進(jìn) VS Code 的插件，當(dāng)然前提是需要安裝好 ESLint^[9]。

Prettier - JavaScript formatter^[10]

MacHi 2017-05-01 18-43-07.png

每個(gè)公司每個(gè)團(tuán)隊(duì)都有自己的編碼規(guī)范，而代碼格式化功能是提高開發(fā)者輸出符合規(guī)范代碼效率的工具，這個(gè)插件是在 VS Code 中支持 Prettier 的插件，Prettier^[11] 是一個(gè) Javascript 代碼的格式化工具。

Auto Close Tag^[12]

MacHi 2017-05-01 18-35-30.png

提高開發(fā)效率的插件，在 VS Code 中支持自動(dòng)補(bǔ)全 HTML/XML 關(guān)閉標(biāo)簽。

Auto Rename Tag^[13]

MacHi 2017-05-01 18-36-51.png

提高開發(fā)效率的插件，在 VS Code 中支持重命名 HTML/XML 對(duì)應(yīng)標(biāo)簽。

Color Highlight^[14]

MacHi 2017-05-01 18-43-44.png

代碼中經(jīng)常會(huì)出現(xiàn)設(shè)置顏色，通常是用十六進(jìn)制格式來表示一個(gè)顏色值，例如 #EB6066，但這個(gè)值對(duì)開發(fā)者而言是沒有意義的，我們看不出來到底對(duì)應(yīng)的是什么顏色，這個(gè)插件幫忙開發(fā)者在 VS Code 中支持十六進(jìn)制格式的顏色進(jìn)行預(yù)覽。

Document This^[15]

MacHi 2017-05-01 18-37-27.png

在 VS Code 中支持在 TypeScript 和 JavaScript 文件中自動(dòng)生成 JSDoc 注釋的插件。

Git Blame^[16]

MacHi 2017-05-01 18-38-02.png

在團(tuán)隊(duì)多人協(xié)作開發(fā)過程中，我們通常需要知道某行代碼最近一次是誰修改的，Git Blame 插件就提供了這么一個(gè)便利的功能。

Rainbow Brackets^[17]

在 React Native 開發(fā)中經(jīng)常會(huì)存在多種括號(hào)混合使用，為了能夠更好的區(qū)分，這個(gè)插件支持不同類型的括號(hào)進(jìn)行彩色著色，支持圓括號(hào)，方括號(hào)和花括號(hào)。

React-Native/React/Redux snippets for es6/es7^[18]

MacHi 2017-05-01 18-34-49.png

在 VS Code 中支持 React Native，React，Redux 常見代碼片段的插件。

TODO Highlight^[19]

MacHi 2017-05-01 18-32-18.png

在 VS Code 中支持 TODO:，FIXME: 等類型注釋關(guān)鍵詞高亮的插件。

Path Intellisense^[20]

MacHi 2017-05-01 18-49-37.png

在 VS Code 中支持自動(dòng)補(bǔ)全文件路徑名的插件。

AutoFileName^[21]

MacHi 2017-05-01 20-13-03.png

另一個(gè)自動(dòng)補(bǔ)全文件名的插件，如下所示：

EditorConfig^[22]

MacHi 2017-05-01 20-25-05.png

EditorConfig^[23] 通過在工程中增加一個(gè)配置文件以及安裝對(duì)應(yīng)的插件，實(shí)現(xiàn)在不同編輯器和 IDE 保持工程中代碼文件編碼格式的一致性，EditorConfig 的配置文件具有良好的可讀性，并能很好的和版本控制系統(tǒng)一起協(xié)作。更詳細(xì)內(nèi)容可以參見《我的 React Native 技能樹點(diǎn)亮計(jì)劃 の 代碼風(fēng)格統(tǒng)一工具 EditorConfig》一文。

1. https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native ?

2. https://marketplace.visualstudio.com/items?itemName=flowtype.flow-for-vscode ?

3. https://flow.org/ ?

4. https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint ?

5. http://www.gimpel.com/html/pcl.htm ?

6. http://www.gimpel.com/html/flex.htm ?

7. http://findbugs.sourceforge.net/ ?

8. http://oclint.org/ ?

9. http://eslint.org/ ?

10. https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode ?

11. https://github.com/prettier/prettier\ ?

12. https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag ?

13. https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag ?

14. https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight ?

15. https://marketplace.visualstudio.com/items?itemName=joelday.docthis ?

16. https://marketplace.visualstudio.com/items?itemName=waderyan.gitblame ?

17. https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets ?

18. https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux ?

19. https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight ?

20. https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense ?

21. https://marketplace.visualstudio.com/items?itemName=JerryHong.autofilename ?

22. https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig ?

23. http://editorconfig.org/ ?