ReactNative系列文章:

1.《逻辑性最强的React Native环境搭建与调试》

2.《ReactNative开发工具有这一篇足矣》

正文

React Native(以下简称RN)开发工具的文章很多,几乎千篇一律都是Copy的(一毛一样),本文结合自己的实践经历,推荐给Coder最实用的RN开发工具,RN开发工具用这一篇足矣!

概述:开发RN的工具有很多,选择性也比较多,比如Facebook专门为React开发的IDE:Nuclide,还有做前端比较熟悉的WebStorm、Sublime Text 3、VS Code等。

面对这些IDE我们应该怎么选择的呢?先说不推荐IDE排行榜

Top1:Nuclide虽然是Facebook专门为React开发的,但依托于Atom的Nuclide真是慢的出奇,性能低到无法让人忍受,如果你觉得自己是一个好性子,不妨验证一番。

Top2:WebStorm这个工具对于我来说是非常熟悉的IDE从几年前开始开发NodeJs一来一直使用的此IDE,他的缺点是慢、卡、容易崩溃,而且是收费的,虽然可以破解但对于没有用过的人来说,门槛也不低,但重要的是它的不稳定性崩溃和加载启动的速度着实让人不满意。

说完了不推荐使用的IDE,下来说说咱们的重点推荐IDE排行榜

Top 2:Sublime Text 3启动和关闭的速度简直快的像打开text文本一般,当装完插件之后也好用的可以上天,下面说说具体的使用以及插件安装和优化。

1.下载地址:http://www.sublimetext.com/3

2.安装Package Control

Win系统可以使用“Ctrl+`”快捷键或者通过View->Show Console菜单打开命令行,粘贴如下代码:

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

3.安装需要用到的插件

打开Sublime Text3 ,Win系统可以使用快捷键CTRL+SHIFT+P 打开或者,点击菜单栏的“Preferences”-->"Package Control"

打开的终端窗口,输入“install”,下方就会提示“Package Control:install package”,用鼠标点击,后输入要安装的插件:

  •  ReactJS:支持React开发,代码提示,高亮显示
  •  Emmet:前端开发必备
  •  Terminal:在sublime中打开终端并定位到当前目录
  •  react-native-snippets:react native 的代码片段
  •  JsFormat:格式化js代码

其中要单独设置的是JsFormat可以设置为保存时自动格式化,设置如下:打开preferences -> Package Settings -> JsFormat -> Setting - Users,输入以下代码:

{

  "e4x": true,

  // jsformat options

  "format_on_save": true,

}

效果如图:

Top 1:VS Code

1.下载地址https://code.visualstudio.com/Download

2.添加RN开发插件

  •  React Native Tools:微软官方出的ReactNative插件,非常好用
  •  Reactjs code snippets:react的代码提示,如componentWillMount方法可以通过cwm直接获得
  •  Auto Close Tag:自动闭合标签
  •  Auto Rename Tag:自动重命名标签,配合上面的插件使用,基本上能赶上IntelliJ IDEA系的功能了
  •  Path Intellisense:文件路径提示补全

3.常用快捷键&设置

Shift + Alt + F:格式化代码

Ctrl + Space:代码提示,与输入快捷键冲突所有使用不了,可根据自己喜爱自行设置,设置:文件 => 首选项 => 键盘快捷方式 => 搜索“space”=>修改为自己的快捷键,如图:

4.配置VSCode调试ReactNative,摆脱手动输入命令运行RN项目的苦恼

  a).安装“React Native Tools”插件;

  b).点击调试 => 增加配置 => 选择“React Native:Debug Android” => 插入代码报错,如图:

保存,点击调试按钮,即可运行调试RN项目;

如果觉得有用,请点击“推荐”按钮,谢谢!

ReactNative开发工具有这一篇足矣的更多相关文章

  1. React-Native(二):React Native开发工具vs code配置

    从网上翻阅了一些开发react-native的开发工具时,发现其实可选的工具还是比较多的Sublime Text,WebStrom,Atom+Nuclide,vs code 等.因为我用.net生态环 ...

  2. 微信小程序开发之入门篇(熟悉开发工具)

    个人的每一篇博文都谈不上有什么技术含量,只是为了帮助不熟悉微信小程序开发的自己及他人提供一下思路.谢谢,下面开始! PS: 因为本人没有小程序的内测资格,所以所有的开发及Demo都是无AppId的,如 ...

  3. 第一篇:打造专属开发工具Eclipse篇

    第一篇:打造专属开发工具Eclipse篇 eclipse 优化 1.动画很酷,但如果可以的话,我总是在所有的工具中禁用动画.所以classic或者window classic主题是我最常用的主题 , ...

  4. 开发工具篇:JAVA和IntelliJ IDEA相恋

    开发工具篇:JAVA和IntelliJ IDEA相恋 idea是什么? IDEA 全称 IntelliJ IDEA,是java语言开发的集成环境,IntelliJ在业界被公认为最好的java开发工具之 ...

  5. C# 基础知识系列- 16 开发工具篇

    0. 前言 这是C# 基础知识系列的最后一个内容讲解篇,下一篇是基础知识-实战篇.这一篇主要讲解一下C#程序的结构和主要编程工具. 1. 工具 工欲善其事必先利其器,在实际动手之前我们先来看看想要编写 ...

  6. 学习java随笔第二篇:java开发工具——Eclipse

    java开发工具有很多这里我使用的是Eclipse. 首先我在官网上下载了Eclipse的软件包,下载地址:http://www.eclipse.org/downloads/,然后有在网上找了一个汉化 ...

  7. UI5-学习篇-1-Eclipse开发工具及环境搭建

    最近研究SAP-UI5好几个月了,将相关学习经历及问题点做个记录. 1.先了解学习资料相关站点 SAP官网:https://www.sap.com/china/index.html SAP开发工具:h ...

  8. .net core 第一篇选择开发工具和环境

    .net core 已经发布三年了,社区也逐步成熟.作为微软阵营的一员,忙了一年年底抽点时间系统学习下.学习资料主要为以下为主: 1. https://docs.microsoft.com/zh-cn ...

  9. VS code开发工具的使用教程

    前言 工欲善其事必先利其器,提高程序员的开发效率必须要有一个好的开发工具,当前最好的前端开发工具主要有VS code.sublime Text.Atom.Webstorm.Notepad++. VS ...

随机推荐

  1. 网站权限管理 之 角(jue)色管理

    公司或网站的正常运行,离不开管理员对各个员工的合理分配,那先看看权限管理中的角色管理好了: 要更改用户的角色,那么先来理一下思路: (1)用户现在是什么角色? (2)用户将要成为什么角色? (3)怎样 ...

  2. javaWeb学习总结(7)-会话之session技术

    什么是Session 使用Cookie和附加URL参数都可以将上一次请求的状态信息传递到下一次请求中,但是如果传递的状态信息较多,将极大降低网络传输效率和增大服务器端程序处理的难度. Session技 ...

  3. R语言机器学习之caret包运用

    在大数据如火如荼的时候,机器学习无疑成为了炙手可热的工具,机器学习是计算机科学和统计学的交叉学科, 旨在通过收集和分析数据的基础上,建立一系列的算法,模型对实际问题进行预测或分类. R语言无疑为我们提 ...

  4. 挂载mount

    mount 1 挂载mount 基本概念 挂载:将额外文件系统与根文件系统现存的目录建立起关联关系,进而使得此目录做为其它文件访问入库的行为 卸载:为解除关联关系的过程 注意:挂载点下原有的文件在挂载 ...

  5. springboot 集成elasticsearh的简单配置

    添加依赖 gradle compile("org.springframework.boot:spring-boot-starter-data-elasticsearch:${springBo ...

  6. 【T-SQL】系列文章全文目录(2017-06-02更新)

    本系列[T-SQL]主要是针对T-SQL的总结. T-SQL基础 [T-SQL基础]01.单表查询-几道sql查询题 [T-SQL基础]02.联接查询 [T-SQL基础]03.子查询 [T-SQL基础 ...

  7. Ionic3新特性--页面懒加载2加载其他组件

    在第一节中,我们介绍了页面的懒加载方式,并进行了初步的分析,这里,我们将进一步介绍如何配合页面懒加载进行其他组件Component.Pipe.Directive等的模块化,和加载使用. 首先说明一点, ...

  8. python基础操作_字符串操作_列表操作list

    #字符串可以通过下表取值,如下程序 names='java python' print(names[0],names[5]) #使用for循环轮询所有name值 ''' for name in nam ...

  9. 每天一个JS 小demo之留言板。主要知识点:DOM方法的理解和运用

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  10. Spring学习(11)---JSR-250标准注解之 @Resource、@PostConstruct、@PreDestroy

    1)@Resource(JSR-250标准注解,推荐使用它来代替Spring专有的@Autowired注解) Spring 不但支持自己定义的@Autowired注解,还支持几个由JSR-250规范定 ...