环境配置:React Native智能开发工具,可代码提醒的IDE—VS Code

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间)

VS Code是一个专门为React Native项目提供开发环境的扩展开发插件工具。可以调试代码,快速运行React Native的命令,并且可以智能提醒。非常的简便好用。

安装

首先要确保你已经安装了相关的React Native开发环境,并配置了开发环境。 安装VS Code方法非常简单,去github上下载插件,直接安装在电脑就可以了。 插件地址:https://github.com/Microsoft/vscode-react-native

它具有打开文件夹功能,定位到React Native项目的根目录直接使用文件夹打开功能就可以,这样就可以把整个项目目录放进去了。 效果如下:

调试环境

安装调试环境

  1. 点击VS Code左边菜单上的按钮

,然后点击configure左端最上面的设置按钮

,选择 React Native 调试环境。 如下图:

提示:在你的开发工具中,你可能没有找到选择 React Native 调试环境。跟图上的样子不一样。没事,往下看,会告诉你解决办法的。

  1. VS Code就生成了一个launch.json文件,我们项目中的一些默认配置就在上面,我们可以修改配置文件中的内容,比如:我们可以修改target属性来选择调试的模拟器。 如下图:

开启调试对话

要启动调试会话,请从配置下拉列表中选择配置,然后点击开始按钮,齿轮形状的配置按钮(或按F5)。

更多关于使用VS Code调试的信息,可以查看整个指南: 地址:https://code.visualstudio.com/docs/editor/debugging

在命令面板上使用React Native命令

打开命令面板,选择React Native命令类型。 如下图:

提示:在你的开发工具中,你可能没有找到图上的命令。没事,接着往下看,我会告诉解决办法的。

  1. 运行android命令触发react-native run-android,启动安卓应用。
  2. 运行ios命令触发react-native run-ios,在模拟器中可以运行ios应用。
  3. 使用Packager命令,可以打开和关闭React-Packager。

提示中的解决办法

解决上面不显示和图中不一致的问题,其实是开发工具中没有安装React Native Tools的原因,我们可以在扩展里搜索React Native找到React Native Tools安装上这个插件就可以了。 如图:

使用智能提醒功能

智能提醒功能可以帮助我们找到React Native中相关的对象,方法以及参数。 如下图:

启用智能提醒

React Native智能提醒功能依赖于VS Code工具支持JSX语法。为了打开该特性,当我们打开React Native项目的时候,会立即出现如下的提示。

这是一个一次性的提示,使用JSX支持。我们需要重新启动VS Code使更改设置(智能提醒)生效。

提示:最新版本本身就支持Salsa智能提醒。

我们可以验证是否已经启动Salsa智能提醒功能,可以检查最底部的状态栏Status Bar,如果这样显示,说明已经成功了。

关于VS Code的内容,我们大致先讲解这些吧。如果还有什么疑问或者不了解的,我们可以一起讨论。

相关推荐:环境配置:React Native 开发环境配置 For Android(可点击)

原文发布于微信公众号 - 非著名程序员(non-famous-coder)

原文发表时间:2016-10-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏deed博客

[代码参考]在html文件调用其它html文件的几种方法

2313
来自专栏DannyHoo的专栏

iOS中合并framework

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

1364
来自专栏玩转JavaEE

V部落博客管理平台开源啦! Vue+SpringBoot强强联合!

V部落是一个多用户博客管理平台,采用Vue+SpringBoot开发。 演示地址: http://45.77.146.32:8081/index.html 项目...

3709
来自专栏编程微刊

微信小程序云开发数据库操作查询记录

数据库操作参考API:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-cl...

5K3
来自专栏web前端-

初始vue

     vue是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,...

1083
来自专栏静下来

设置wordpress文章标题在新标签打开

这个问题我也是今天才发现,我这个网站的标题是在当前页面打开的。 我个人是一直不喜欢这种打开方式的,不管是我自己的网站,还是别人的某些网站。 我觉得这样,有时...

3884
来自专栏前端儿

iPhone页面的常用调试方法

某些页面需要设置HOST才能进行访问,在iPhone上不好设置HOST,所以需要一些代理工具帮助我们

4811
来自专栏云计算教程系列

如何在Ubuntu 14.04上使用Fail2Ban保护WordPress

WordPress是一个非常强大的内容管理系统(CMS),是免费和开源的。因为任何人都可以发表评论,创建一个帐户,并在WordPress上发帖,许多恶意行为者已...

1700
来自专栏Google Dart

AngularDart4.0 指南 原

      本文档为Angular的高级部分,如果你刚接触Angular,请先学习Angular。

1162
来自专栏张戈的专栏

借助PageSpeed,为Nginx网站服务器提速

网站加载速度越快,访客互动性、留住率和转换率就越高,这早已不是什么秘密。网站每延迟 100 毫秒,亚马逊的销售额就会减少 1%;延迟增加 500 毫秒,这意味着...

4047

扫码关注云+社区

领取腾讯云代金券