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


Posted in Javascript onDecember 27, 2017

本文介绍了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的选项

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.其它实用插件

  1. Auto Close Tag
  2. Auto Complete Tag
  3. AutoFileName
  4. Auto Rename Tag
  5. Auto Import
  6. Path Intellisense
  7. Color Highlight

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery BS,dialog控件自适应大小
Jul 06 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
子页向父页传值示例
Nov 27 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 Javascript
VSCode配置react开发环境的步骤
Dec 27 #Javascript
在vue项目中安装使用Mint-UI的方法
Dec 27 #Javascript
AngularJS集合数据遍历显示的实例
Dec 27 #Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 #Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 #Javascript
Vue 过滤器filters及基本用法
Dec 26 #Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 #Javascript
You might like
php实现的支持断点续传的文件下载类
2014/09/23 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
PHP设置进度条的方法
2015/07/08 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
javascript Keycode对照表
2009/10/24 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
微信小程序异步处理详解
2017/11/10 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
python requests.get带header
2020/05/05 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
什么是规则表达式
2012/05/03 面试题
女大学生个人求职信
2013/12/09 职场文书
幼儿教师研修感言
2014/02/12 职场文书
《诺贝尔》教学反思
2014/02/17 职场文书
教师自我鉴定范文
2014/03/20 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle