VSCode配置ReactNative开发环境的方法

本文介绍了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.其它实用插件

Auto Close Tag
Auto Complete Tag
AutoFileName
Auto Rename Tag
Auto Import
Path Intellisense
Color Highlight

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

分享文章：VSCode配置ReactNative开发环境的方法
转载来源：http://scyanting.com/article/pshpoh.html

VSCode配置ReactNative开发环境的方法

其他资讯