实例详解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

添加配置

结果如下：

PHP 网络编程技术与实例(曹衍龙)

PHP网络编程技术详解由浅入深，全面、系统地介绍了PHP开发技术，并提供了大量实例，供读者实战演练。另外，笔者专门为本书录制了相应的配套教学视频，以帮助读者更好地学习本书内容。这些视频和书中的实例源代码一起收录于配书光盘中。本书共分4篇。第1篇是PHP准备篇，介绍了PHP的优势、开发环境及安装；第2篇是PHP基础篇，介绍了PHP中的常量与变量、运算符与表达式、流程控制以及函数；第3篇是进阶篇，介绍

下载

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

Debug iOS

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

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

相关推荐：

实例详解VSCode配置react开发环境的步骤

实例详解vue-cli vscode 配置 eslint

利用VSCode做PHP开发的必备插件和配置