VSCode 配置React Native開發(fā)環(huán)境的方法

更新時間：2017年12月27日 09:19:54 作者：冰琳92

本篇文章主要介紹了VSCode 配置React Native開發(fā)環(huán)境的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

本文介紹了VSCode 配置React Native開發(fā)環(huán)境的方法，分享給大家，具體如下：

1.安裝VSCode

2.安裝插件

按F1 并輸入 ext install 并回車, 或者使用

輸入react-native安裝React Native Tools

假定你已經(jīng)在設(shè)備上安裝了react native，

如果沒有安裝，請使用npm install -g react-native-cli安裝

或者按照官方文檔操作

新建一個RN工程并使用VSCode打開

安裝完成后按F1可以看到命令里多了很多關(guān)于React Native的選項

React Native Command

3.配置調(diào)試環(huán)境

a.自動配置

鍵入shift+cmd+D或者點擊icon

shift+cmd+D

再點擊

設(shè)置

選擇 React Native：

會自動生成launch.json文件，里面4個配置選項Debug Android、Debug iOS、Debug iOS、Debug iOS

{
  "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"
    },
    {
      "name": "Debug iOS",
      "program": "${workspaceRoot}/.vscode/launchReactNative.js",
      "type": "reactnative",
      "request": "launch",
      "platform": "ios",
      "target": "iPhone 5s",
      "sourceMaps": true,
      "outDir": "${workspaceRoot}/.vscode/.react"
    },
    {
      "name": "Attach to packager",
      "program": "${workspaceRoot}/.vscode/launchReactNative.js",
      "type": "reactnative",
      "request": "attach",
      "sourceMaps": true,
      "outDir": "${workspaceRoot}/.vscode/.react"
    },
    {
      "name": "Debug in Exponent",
      "program": "${workspaceRoot}/.vscode/launchReactNative.js",
      "type": "reactnative",
      "request": "launch",
      "platform": "exponent",
      "sourceMaps": true,
      "outDir": "${workspaceRoot}/.vscode/.react"
    }
  ]
}

b. 手動配置

接下來我們清空 configurations

點擊添加配置按鈕，并選擇configuration

添加配置

結(jié)果如下：

{
  "version": "0.2.0",
  "configurations": [
    
  ]
}

在此點擊添加配置按鈕，選擇React Native: Debug iOS

配置選項

這樣運行iOS就配置好了

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug iOS",
      "program": "${workspaceRoot}/.vscode/launchReactNative.js",
      "type": "reactnative",
      "request": "launch",
      "platform": "ios",
      "sourceMaps": true,
      "target": "iPhone 6s",
      "outDir": "${workspaceRoot}/.vscode/.react"
    }
  ]
}

點擊設(shè)置左邊的選項，會有Debug iOS選項