React-Native(二):React Native开发工具vs code配置
从网上翻阅了一些开发react-native的开发工具时,发现其实可选的工具还是比较多的Sublime Text,WebStrom,Atom+Nuclide,vs code 等。因为我用.net生态环境的ide比较多,所以当看到有vs code时,就毫无犹豫的选择了它作为react-native的开发工具。
vs code是一个开源的,而且linux,windows,mac环境都可以支持,通过插件安装可以开发c#,java,php,js,html,css等。
本篇文章,就用来记录如何使用vs code配置react native的开发环境:
1)从microsoft vs code官网:https://code.visualstudio.com/ 上下载vs code,并安装。
2)使用vs code开发上篇文章我们创建的HelloWord工程目录:vs code 的导航中的文件-》打开文件夹(F)..-》浏览到:D:\RN_software\app_projects\HelloWord并打开
打开后vs code界面:

3)vs code安装 react native开发及调试工具:“React Native Tools”

4)使用vs code及debuging android 工具调试react native程序:
当点击 点击VS Code左边菜单上的按钮
,然后点击configure左端最上面的设置按钮
,选择 React Native 调试环境。vs Code就生成了一个launch.json文件,我们项目中的一些默认配置就在上面,我们可以修改配置文件中的内容,比如:我们可以修改target属性来选择调试的模拟器。
如下:
launch.json
{
// Use IntelliSense to learn about possible Node.js debug attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"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"
},
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${file}"
}
]
}
调试

调试“输出”窗口输出信息:
######### Starting Packager ##########
######### Executing command: react-native.cmd start --port ##########
Scanning folders for symlinks in d:\RN_software\app_projects\HelloWord\node_modules (16ms)
┌────────────────────────────────────────────────────────────────────────────┐
│ Running packager on port . │
│ │
│ Keep this packager running while developing on any JS projects. Feel │
│ free to close this tab and run your own packager instance if you │
│ prefer. │
│ │
│ https://github.com/facebook/react-native │
│ │
└────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
d:\RN_software\app_projects\HelloWord React packager ready.
5)接入真机,并在“终端”窗口上执行:react native命令来启动程序。

React-Native(二):React Native开发工具vs code配置的更多相关文章
- App架构师实践指南二之App开发工具
App架构师实践指南二之App开发工具 1.Android Studio 2.编译调试---条件断点.右键单击断点,在弹出的窗口中输入Condition条件.---日志断点.右键单击断点,在弹 ...
- Jeecg-Boot 开发环境准备(二):开发工具安装
目录索引: 后端开发工具 前端开发工具 Nodejs镜像 WebStorm入门配置 JeecgBoot采用前后端分离的架构,官方推荐开发工具 前端开发: Webstrom 或者 IDEA 后端开发: ...
- 微信小程序开发工具的数据,配置,日志等目录在哪儿? 怎么找?
原文地址:http://www.wxapp-union.com/portal.php?mod=view&aid=359 本文由本站halfyawn原创:感谢原创者:如有疑问,请在评论内回复 ...
- 详解LUA开发工具及其环境配置
LUA开发工具及其环境配置是本文要介绍的内容,主要是来了解并学习lua开发工具的使用和环境的配置,第一次接触LUA的话,就跟本人一起学习吧.看我能不能忽悠到你. LUA是语言,那么一定有编写的工具.第 ...
- odoo开发环境搭建(四):python开发工具IDE pycharm配置
odoo开发环境搭建(四):python开发工具IDE pycharm配置
- JavaEE学习总结(十二)—MyEclipse开发工具与HTML
一.MyEclipse MyEclipse,是在eclipse 基础上加上自己的插件开发而成的功能强大的企业级集成开发环境,主要用于Java.Java EE以及移动应用的开发.MyEclipse的功能 ...
- 微信小程序开发(二)认识开发工具
腾讯微信团队提供非常优秀的微信小程序开发工具,大大降低了开发者的入门门槛,为他们点赞!上一篇文章已经说明了,如何注册及下载开发工具,现在我们就来一起认识见识一下开发工具的庐山真面目. 首次打开这个开发 ...
- ②---Java开发工具Eclipse安装配置
Java开发工具Eclipse安装及配置 以下将为大家介绍Java开发工具Eclipse安装及配置. 一.下载Eclipse安装文件 正所谓工欲善其事必先利其器,我们在开发java语言过程中同样需要依 ...
- javaee开发工具及环境配置过程
在配置javaee开发环境的过程中遇到过很多问题,在此系统的整理一下我之前的配置过程 注:配置过程学习自<JSP&Servlet学习笔记(第二版)>详细过程可以阅读此书.在文章的最 ...
随机推荐
- Keeweb-Linux的密码管理器
Keeweb-Linux的密码管理器 如今,我们依赖于越来越多的线上服务.我们每注册一个线上服务,就要设置一个密码:如此,我们就不得不记住数以百计的密码.这样对于每个人来说,都很容易忘记密码.那么,下 ...
- css实现div中图片高度自适应并与父级div宽度一致
需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...
- Idea中开启assert断言
先打开相应的配置面板,有以下两种方式. 然后在VM栏里输入 -enableassertions 或者 -ea 就好了 然后编写程序试试 我的目录结构如下:(因为Main class那里要写类的全限 ...
- Matlab绘图基础——绘制三维表面
%绘制三维表面 ------------------------------------- %1.绘制线框图:mesh:每一条曲线称为mesh line %首先利用meshgrid函数产生平面区域内的 ...
- 微信公众平台开发,API接入与推送事件(1)
博客好久没有更新了,今天说说微信开发.微信开发的好多初学者都会又这样的迷惑,微信开发到底是什么?其实微信开发本质我和我们的网站开发没有太大的区别.我们常说的微信开发也就是公众号开,微信公众号分为三个类 ...
- python全栈学习--day11(函数高级应用)
一,函数名是什么? 函数名是函数的名字,本质:变量,特殊的变量. 函数名()执行此函数 ''' 在函数的执行(调用)时:打散. *可迭代对象(str,tuple,list,dict(key))每一个元 ...
- 『备注』&#x; 格式 的编码转换
在很多 网站(或者很多 WebService), 我们总能看到 Ӓ &#A22A; 这种格式 的编码. 如何将这种编码 转换成 实际文本,C#代码如下: //各种 幺蛾子网页图标 请参见: ...
- 第一次作业:扑通扑通 我的IT
让我掉下眼泪的不止昨夜的酒,还有这满屏的代码. 第一部分:结缘计算机 你为什么选择计算机专业?你认为你的条件如何?和这些博主比呢? 在炎炎的夏日,伴随这高三的结束,我也面临大学专业的选择,我看着书里密 ...
- 团队作业6——展示博客(Alpha版本)
Deadline: 2017-12-3 23:00PM,以博客发表日期为准 评分基准 按时交 - 有分,检查的项目包括后文的两个方面 团队成员介绍 Alpha阶段进展 团队合作,各成员分工 Be ...
- 构建微服务开发环境3————Java应用的优秀管理工具Maven的下载安装及配置
[内容指引] 下载安装包: MacOS下Maven的安装及配置: Windows下Maven的安装及配置. 一.下载安装包 进入Maven的官方下载地址:http://maven.apache.org ...