欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-07 15:01:08
本文介绍了vscode 配置react native开发环境的方法,分享给大家,具体如下: 1.安装vscode 2.安装插件 按f1 并输入 ext insta...

本文介绍了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的选项

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

react native command

3.配置调试环境

a.自动配置

键入shift+cmd+d或者点击icon

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

shift+cmd+d

再点击

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

设置

选择 react native:

VSCode 配置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

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

点击添加配置按钮,并选择configuration

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

添加配置

结果如下:

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

在此点击添加配置按钮,选择react native: debug ios

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

配置选项

这样 运行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选项

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

debug ios

接下来 就可以点击上面选项的运行按钮,成功运行ios啦

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

hello world

4.其它实用插件

  1. auto close tag
  2. auto complete tag
  3. autofilename
  4. auto rename tag
  5. auto import
  6. path intellisense
  7. color highlight

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。