React Native開發工具推薦——VS Code及常用常用插件詳解

1.開發工具：Visual Studio Code

2.常用插件：

但針對 React Native 開發而言，還不夠詳細，本文就來詳細探討如何更好的爲 React Natiev 開發定製 VSCode。

（1）React Native Tools

微軟官方爲 React Native 開發提供的專門的插件，按照官網的說明進行插件的安裝即可。這個插件使得開發者可以在 VS Code 中調試 React Native 代碼，快速執行 react-nativ命令，以及對 React Native 的 API 具備智能提醒功能

（2）Flow Language Support

Flow3 是 Facebook 出品的一個用於 JavaScript 代碼靜態類型檢查的工具，可以用來發現 Javascript 代碼中的類型錯誤。這個插件是在 VS Code 中支持 Flow 的插件，當然前提是安裝好 Flow。

（3）ESLint

靜態代碼檢查主要用來對代碼的編程規範，語法錯誤等進行掃描，從而在代碼執行之前發現可能存在的問題。在程序設計領域，幾乎每一種語言都有配套的靜態代碼檢查工具，例如 C 和 C++ 語言的 PC-lint5 和 FlexeLint6，Java 語言的 FindBugs7，Android 開發中的 Android Lint，iOS 開發中的 OClint8 等等。React Native 開發中大部分時間都是使用的 Javascript 語言，類似其他語言，Javascript 也有自己的靜態代碼檢查工具，而其中目前應用最廣的就是 ESLint，這個插件就是將 ESLint 集成進 VS Code 的插件，當然前提是需要安裝好 ESLint9。

（4）Prettier - JavaScript formatter

每個公司每個團隊都有自己的編碼規範，而代碼格式化功能是提高開發者輸出符合規範代碼效率的工具，這個插件是在 VS Code 中支持 Prettier 的插件，Prettier11 是一個 Javascript 代碼的格式化工具。

（5）Auto Close Tag

提高開發效率的插件，在 VS Code 中支持自動補全 HTML/XML 關閉標籤。

（6） Auto Rename Tag

提高開發效率的插件，在 VS Code 中支持重命名 HTML/XML 對應標籤。

（7） Color Highlight

代碼中經常會出現設置顏色，通常是用十六進制格式來表示一個顏色值，例如 #EB6066，但這個值對開發者而言是沒有意義的，我們看不出來到底對應的是什麼顏色，這個插件幫忙開發者在 VS Code 中支持十六進制格式的顏色進行預覽。

（8）Document This

在 VS Code 中支持在 TypeScript 和 JavaScript 文件中自動生成 JSDoc 註釋的插件。

（9）Git Blame

在團隊多人協作開發過程中，我們通常需要知道某行代碼最近一次是誰修改的，Git Blame 插件就提供了這麼一個便利的功能。

（10）Rainbow Brackets

在 React Native 開發中經常會存在多種括號混合使用，爲了能夠更好的區分，這個插件支持不同類型的括號進行彩色着色，支持圓括號，方括號和花括號。

（11）React-Native/React/Redux snippets for es6/es7

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

（12）TODO Highlight

在 VS Code 中支持 TODO:，FIXME: 等類型註釋關鍵詞高亮的插件。

（13）Path Intellisense

在 VS Code 中支持自動補全文件路徑名的插件。

（14）AutoFileName

另一個自動補全文件名的插件，如下所示：

（15）EditorConfig

EditorConfig23 通過在工程中增加一個配置文件以及安裝對應的插件，實現在不同編輯器和 IDE 保持工程中代碼文件編碼格式的一致性，EdEitorConfig的配置文件具有良好的可讀性，並能很好的和版本控制系統一起協作

（16）Project Manager

用途：用於多個項目之間的快速切換

使用方法：
1)點擊F1，調出命令面板，輸入：>Project Manager:Edit Projects，打開project.json,配置工程名和路徑

[
    {
        "name": "GitHubTest",
        "rootPath": "E:/RNworkspace/GitHubTest",
        "paths": [],
        "group": ""
    },
    {
        "name": "HelloReact",
        "rootPath": "E:/RNworkspace/HelloReact",
        "paths": [],
        "group": ""
    }

]

2)然後在PROJECTS/Favorites中切換項目：

3.插件的安裝：

選擇擴展，輸入插件名，選擇正確的插件安裝，記得之後重啓之後纔可以起作用哦