ReactNative开发工具有这一篇足矣

简介: ReactNative系列文章: 1.《逻辑性最强的React Native环境搭建与调试》 2.《ReactNative开发工具有这一篇足矣》 正文 React Native(以下简称RN)开发工具的文章很多,几乎千篇一律都是Copy的(一毛一样),本文结合自己的实践经历,推荐给Coder最实用的RN开发工具,RN开发工具用这一篇足矣! 概述:开发RN的工具有很多,选择性也比较多,比如Facebook专门为React开发的IDE:Nuclide,还有做前端比较熟悉的WebStorm、Sublime Text 3、VS Code等。

 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项目;

 

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

 

img_fa0be433d68c8212b2b0b3b1a564ccb1.png
如果本文对你有所帮助,请打赏——1元就足够感动我:)
支付宝打赏 微信打赏
联系邮箱:intdb@qq.com
我的GitHub: https://github.com/vipstone
关注公众号: img_9bde0f31ac4a0eca10b1bd7414b78faf.png


作者: 王磊
出处: http://vipstone.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,请标明出处。

相关文章
|
前端开发 JavaScript API
使用 JavaScript 检测系统主题色
使用 JavaScript 检测系统主题色
633 0
|
XML Java 数据格式
编织Spring魔法:解读核心容器中的Beans机制【beans 一】
编织Spring魔法:解读核心容器中的Beans机制【beans 一】
169 0
|
C++
C++ E0167 “const wchar_t *“ 类型的实参与 “BSTR“ 类型的形参不兼容
C++ E0167 “const wchar_t *“ 类型的实参与 “BSTR“ 类型的形参不兼容
218 0
三大运营商那个流量便宜
要确定中国三大运营商(中国移动、中国联通、中国电信)中哪个提供的流量套餐更为便宜,并不是一个可以直接给出固定答案的问题,因为不同的地区、时间、以及用户的具体需求(如通话时长、短信数量、数据流量等)都会影响套餐的价格和性价比。不过,以下是一些通用的方法来比较和选择较为经济的流量套餐:
|
11月前
|
存储 人工智能 安全
数据治理:强化数据安全与隐私保护的基石
在当今这个数字化时代,数据已成为推动社会进步和企业发展的核心驱动力。从个人消费习惯到企业运营策略,从政府决策支持到科研创新突破,数据无处不在,其价值不言而喻。然而,随着数据量的爆炸性增长和流通范围的扩大,数据安全与隐私保护问题也日益凸显,成为制约数据价值最大化利用的重要瓶颈。因此,构建完善的数据治理体系,特别是强化数据安全与隐私保护,成为了时代发展的必然要求。
1131 5
|
JavaScript 数据可视化 前端开发
钉钉宜搭通过js触发子表单数据联动
钉钉宜搭通过js触发子表单数据联动
|
存储 关系型数据库 MySQL
技术笔记:MySQL数据库优化详解(收藏)
技术笔记:MySQL数据库优化详解(收藏)
120 0
|
JavaScript 数据可视化 Java
基于Springboot+vue开发实现自行车租赁管理系统
基于Springboot+vue开发实现自行车租赁管理系统
338 0
|
消息中间件 安全 Docker
Docker中部署RabbitMQ并使用Python3.x操作全书(Python操作RabbitMQ看这一篇就够了)
Docker中部署RabbitMQ并使用Python3.x操作全书(Python操作RabbitMQ看这一篇就够了)
162 0
|
人工智能 自然语言处理 JavaScript
OpenAI GPT-3模型详解
针对文本生成和代码生成这两大类场景,OpenAPI分别提供了GPT-3和Codex模型,本文将为大家详细介绍这两个模型。
2052 0
OpenAI GPT-3模型详解