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等。

面对这些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开发工具有这一篇足矣相关推荐

自考的那些事儿（三）:软件开发工具（总述篇）
强烈推荐一个大神的人工智能的教程:http://www.captainbed.net/zhanghan 君子性非异也,善假于物也!-<劝学>(荀子) ####[前言] 纵观人类发展的历史长 ...
弹窗中的彩蛋！一款在线开发工具 JupyterNotebook，一篇博客就会用｜Python技能树测评
昨天测评<python 技能树> 之后发现一个彩蛋,JupyterNotebook 在线编码工具. 文章目录弹窗中的彩蛋初步了解运行代码编写文档补充一下小知识点彩蛋里的意外发现 ...
react-native : 开发工具转帖记录
1.我的 React Native 技能树点亮计划の为 React Native 开发准备的 VS Code 插件 2.我的 React Native 技能树点亮计划の React Native ...
前端开发工具 vscode 使用技巧篇：控制台由powershell切换为cmd方法，windows下新旧版控制台cmd与powershell互切方法
vscode 控制台切换方法可以看到右上角是 powershell 不是 cmd. 通过 ctrl+shift+p,搜索出默认的 shell. 然后选择 cmd. 最后重启 vscode 就好了. ...
自考那些事儿（四）:软件开发工具（理论篇）
强烈推荐一个大神的人工智能的教程:http://www.captainbed.net/zhanghan [前言] 本篇是对上篇博文(自考那些事儿:软件开发工具(总述篇))的理论部分进行了细化. 从软件 ...
自考之——我看《软件开发工具》
<软件开发工具>由理论篇和实践篇构成.实践篇是选取一种详细的软件开发工具Eclipse来进行介绍,帮助我们加深对软件开发工具的理解.在这篇文章里,我就不说这部分内容了. 这里,我主要是对理 ...
JAVA java学习（９）——————java常用开发工具介绍
下面这些工具或许功能和作用不同,但是有着一个共同的主旨,那就是--它们都是为了给 Java 编码和开发提供卓越的支持. 常用源码编辑工具介绍 ava 源代码本质上其实就是普通的文本文件,所以理论上来说 ...
自考那些事儿（五）:软件开发工具（实践篇）
强烈推荐一个大神的人工智能的教程:http://www.captainbed.net/zhanghan [前言] 掐指一算从上次考完<软件开发工具>到现在也一个月有余,这次再次翻看之前自己 ...
学javascript需要用到哪些开发工具？分享这几款
学习web前端技术,辅助工具是在学习过程中必须要用到的,包括后面的工作中,辅助工具可以更快的提高我们的工作效率,下面小编就为大家整理了学javascript需要用到的开发工具. 学javascript ...

ReactNative开发工具有这一篇足矣

ReactNative开发工具有这一篇足矣相关推荐

最新文章

热门文章