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

时间:2021-05-26

本文介绍了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
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章