React-Native（二）：React Native開發工具vs code配置

　　從網上翻閱了一些開發react-native的開發工具時，發現其實可選的工具還是比較多的Sublime Text,WebStrom,Atom＋Nuclide,vs code 等。因為我用.net生態環境的ide比較多，所以當看到有vs code時，就毫無猶豫的選擇了它作為react-native的開發工具。

　　vs code是一個開源的，而且linux，windows，mac環境都可以支持，通過插件安裝可以開發c#,java,php,js,html,css等。

　　本篇文章，就用來記錄如何使用vs code配置react native的開發環境：

1）從microsoft vs code官網：https://code.visualstudio.com/ 上下載vs code，並安裝。

2）使用vs code開發上篇文章我們創建的HelloWord工程目錄：vs code 的導航中的文件-》打開文件夾(F)..-》瀏覽到：D:\RN_software\app_projects\HelloWord並打開

打開后vs code界面:

3）vs code安裝 react native開發及調試工具：“React Native Tools”

4）使用vs code及debuging android 工具調試react native程序：

當點擊　點擊VS Code左邊菜單上的按鈕，然后點擊configure左端最上面的設置按鈕，選擇 React Native 調試環境。ｖｓ Code就生成了一個launch.json文件，我們項目中的一些默認配置就在上面，我們可以修改配置文件中的內容，比如：我們可以修改target屬性來選擇調試的模擬器。 
如下：

ｌａｕｎｃｈ.json

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [        
        {
            "name": "Debug Android",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "launch",
            "platform": "android",
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${file}"
        }
    ]
}

調試

調試“輸出”窗口輸出信息：

######### Starting Packager ##########
######### Executing command: react-native.cmd start --port 8081 ##########
Scanning 556 folders for symlinks in d:\RN_software\app_projects\HelloWord\node_modules (16ms)
 ┌────────────────────────────────────────────────────────────────────────────┐ 
 │  Running packager on port 8081.                                            │ 
 │                                                                            │ 
 │  Keep this packager running while developing on any JS projects. Feel      │ 
 │  free to close this tab and run your own packager instance if you          │ 
 │  prefer.                                                                   │ 
 │                                                                            │ 
 │  https://github.com/facebook/react-native                                  │ 
 │                                                                            │ 
 └────────────────────────────────────────────────────────────────────────────┘ 
Looking for JS files in
   d:\RN_software\app_projects\HelloWord 


React packager ready.

5）接入真機，並在“終端”窗口上執行:react native命令來啟動程序。