本文主要介绍了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.其它实用插件
auto close tag
auto complete tag
autofilename
auto rename tag
auto import
path intellisense
color highlight
相关推荐：
实例详解vscode配置react开发环境的步骤
实例详解vue-cli vscode 配置 eslint
利用vscode做php开发的必备插件和配置
以上就是实例详解vscode 配置react native开发环境的详细内容。