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

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

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

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

1.安裝VSCode

2.安裝插件

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

輸入react-native安裝React Native Tools

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

如果沒有安裝，請(qǐng)使用npm install -g react-native-cli安裝

或者按照官方文檔操作

新建一個(gè)RN工程并使用VSCode打開

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

React Native Command

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

a.自動(dòng)配置

鍵入shift+cmd+D或者點(diǎn)擊icon

shift+cmd+D

再點(diǎn)擊

設(shè)置

選擇 React Native：

會(huì)自動(dòng)生成launch.json文件，里面4個(gè)配置選項(xiàng)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. 手動(dòng)配置

接下來我們清空 configurations

點(diǎn)擊添加配置按鈕，并選擇configuration

添加配置

結(jié)果如下：

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

在此點(diǎn)擊添加配置按鈕，選擇React Native: Debug iOS

配置選項(xiàng)

這樣運(yùn)行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"
    }
  ]
}

點(diǎn)擊設(shè)置左邊的選項(xiàng)，會(huì)有Debug iOS選項(xiàng)