在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的选项

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

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vue中如何实现directive功能

使用React如何防止出现重复渲染

使用vue如何实现grid-layout功能