[React Native]IDE-VSCode

本文的前提是你已经配置好了React Native的环境,还不熟悉的朋友请先移步这里。

上一篇文章我们介绍了WebStorm的安装和使用。本来我不打算介绍VSCode了,后来试用了下,发现VSCode对于编写ReactNative程序来说真的非常适合(目前来说),因为他有快捷的部署能力(react-native run android、react-native start等命令)和良好的ReactNative插件支持,我们看一张演示图

[React Native]IDE-VSCode_第1张图片
react-features.gif
VSCode安装步骤(Windows)

. 官方网站下载安装包,点击默认安装即可
. 安装vscode-react-native插件

  1. 按下 F1 键,出现图示的输入框
  2. 删除>符号,输入 ext install react-native,按下回车键,点击图2红色区域的按钮耐心等待即可(鼠标移除VSCode你会发现输入框没了,不用担心,安装好了会提示你的~这点真够恶心,导致我几次都以为不在下载,这点差评!)
  3. 安装好了会提示你重启,点击立即重启,如图3
[React Native]IDE-VSCode_第2张图片
图1
[React Native]IDE-VSCode_第3张图片
图2

[React Native]IDE-VSCode_第4张图片
图3

. 调试
导入React-Native项目,这边以 react-native-gitfeed为例
1.安装调试环境,依次点击 图4的步骤,选择 React Native,会发现 图4三角箭头右边的提示出现Debug Android,如 图5

[React Native]IDE-VSCode_第5张图片
图4

[React Native]IDE-VSCode_第6张图片
图5

2.点击 图5安装应用到手机或者模拟器(如果没有Debug Android,可以通过F1键,打开输入框,输入react开头,如 图6,选择 React Native Run Android 来部署应用,成功之后再选择 React Native Start Packager 来开启服务)

[React Native]IDE-VSCode_第7张图片
图6

这样应用就会安装到你的手机上了,接下来我们就可以直接调试我们的应用啦~

你可能感兴趣的:([React Native]IDE-VSCode)