VSCode 配置React Native开发环境的方法

按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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://127.0.0.1/wyyjwy.html