VSCode 配置React Native开发环境的方法_JavaScript

VSCode 配置React Native开发环境的方法

本文介绍了vscode 配置react native开发环境的方法，分享给大家，具体如下：

1.安装vscode

2.安装插件

按f1 并输入 ext install 并回车, 或者使用

输入react-native安装react native tools

假定你已经在设备上安装了react native，

如果没有安装，请使用npm install -g react-native-cli安装

或者按照操作

新建一个rn工程并使用vscode打开

安装完成后按f1可以看到命令里多了很多关于react native的选项

react native command

3.配置调试环境

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

添加配置

结果如下：

{
  "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选项