ReactNative开发工具备这一篇足矣

 ReactNative系列文章：

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

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

正文

React Native（如下简称RN）开发工具的文章不少，几乎千篇一概都是Copy的（一毛同样），本文结合本身的实践经历，推荐给Coder最实用的RN开发工具，RN开发工具用这一篇足矣！

概述：开发RN的工具备不少，选择性也比较多，好比Facebook专门为React开发的IDE：Nuclide，还有作前端比较熟悉的WebStorm、Sublime Text 三、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项目；

 

若是以为有用，请点击“推荐”按钮，谢谢！