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

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 22:22:49

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

VSCode 配置React Native開發(fā)環(huán)境的方法:本文介紹了VSCode 配置React Native開發(fā)環(huán)境的方法，分享給大家，具體如下： 1.安裝VSCode 2.安裝插件按F1 并輸入 ext install 并回車, 或者使用輸入react-native安裝React Native Tools 假定你已經(jīng)在設備上安裝了react native

推薦度：

點擊下載本文 文檔為doc格式

導讀VSCode 配置React Native開發(fā)環(huán)境的方法:本文介紹了VSCode 配置React Native開發(fā)環(huán)境的方法，分享給大家，具體如下： 1.安裝VSCode 2.安裝插件按F1 并輸入 ext install 并回車, 或者使用輸入react-native安裝React Native Tools 假定你已經(jīng)在設備上安裝了react native

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

1.安裝VSCode

2.安裝插件

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

輸入react-native安裝React Native Tools

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

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

或者按照官方文檔操作

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

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

React Native Command

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

a.自動配置

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

shift+cmd+D

再點擊

設置

選擇 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"
 }
 ]
}

點擊設置左邊的選項，會有Debug iOS選項