ReactNative开发工具有这一篇足矣

ゞ浴缸里的玫瑰 2022-03-29 12:41 663阅读 0赞

**正文**

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][http_www.sublimetext.com_3]

**2.安装Package Control**

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

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>import urllib.request,os; pf =&nbsp;</code> 
      <code>'Package Control.sublime-package'</code> 
      <code>; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.</code> 
      <code>join</code> 
      <code>(ipp, pf),&nbsp;</code> 
      <code>'wb'</code> 
      <code>).write(urllib.request.urlopen(&nbsp;</code> 
      <code>'http://sublime.wbond.net/'</code>&nbsp; 
      <code>+ pf.replace(</code> 
      <code>' '</code> 
      <code>,</code> 
      <code>'%20'</code> 
      <code>)).read())</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**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,输入以下代码：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>{ </code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>"e4x": true,</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>// jsformat options</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>"format_on_save": true,</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

效果如图：

![172074-20170706111353644-1664385283.gif][]

**Top 1：VS Code**

**1.下载地址**：[https://code.visualstudio.com/Download][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”=>修改为自己的快捷键，如图：

![172074-20170706111430972-1018375979.png][]

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

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

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

![172074-20170908114229632-1134211349.png][]

保存，点击调试按钮，即可运行调试RN项目；

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

[http_www.sublimetext.com_3]: http://www.sublimetext.com/3
[172074-20170706111353644-1664385283.gif]: /images/20220329/720129a10fc14ea3b3ff95ae8ae8092e.png
[https_code.visualstudio.com_Download]: https://code.visualstudio.com/Download
[172074-20170706111430972-1018375979.png]: /images/20220329/2c82154ab95245eb8427257c04cc8969.png
[172074-20170908114229632-1134211349.png]: /images/20220329/917e12806bfc47308b4176d97e6fe715.png