本文介绍了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
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在vue中如何实现directive功能
使用react如何防止出现重复渲染
使用vue如何实现grid-layout功能
以上就是在vscode中如何配置react native开发环境的详细内容。