React Native之路（二）IDE选择

开发React navtive 基本上有三大IDE可选择：

1. 官方的Nuclide

Nuclide是Facebook专门为React开发的IDE，据说语法补全等智能提醒功能不错，但是需要先安装Atom，而且看网上的文章说Atom性能太卡，而且文件加载速度等方面也比较慢，这个我没有去验证，不知道目前版本怎样。而且目前主要是为了学习React navtive不建议过度依赖智能提醒功能，前期多多手写代码能够让我们尽早的熟悉React navtive语法，所以目前暂时放弃了Nuclide，以后熟悉了可能会考虑吧。

２. WebStorm

听前端的小伙伴说这是Web前端开发神器，但是WebStorm有些吃内存，所以建议小内存的不要使用要不然同时开着AS和WebStorm没准会很卡，同时WebStorm也有React Native的智能提醒插件ReactNative-LiveTemplate。

３. Sublime

这个也是最终选择的编辑器（也因为以前一直用它编辑其他文本，哈哈）这是个非常轻量级的编辑器，Subline3安装包才8.1M,而且无论是打开方式，代码界面整洁度上，都比其他两种方式较为舒适，集成Package Control后可以扩展许多功能强大的插件，非常方便。而且使用Material Theme后真个界面看起来高大上许多。

Subline 3 开发React Native必备插件

需要先安装Package Control才能导入其他插件。

安装Package Control

打开subline 控制台快捷键为 Ctrl+` 或者View->Show Console。
输入以下命令：

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

如果安装不成功，可使用官网办法:https://packagecontrol.io/installation#st3

安装成功后打开Sublime Text3 ，点击菜单栏的“Preferences”-->"Package Control"或者CTRL+SHIFT+P打开终端窗口

选择 Package Control:Install Package,等待几秒，就会弹出一个终端，在终端输入你想要安装的插件，进行查找，点击下方列表中插件，就会自动安装

1 Terminal

用于在sublime中打开终端并定位到当前目录，调试必备。安装好后可通过CTRL+SHIFT+T启动终端

2 react-native-snippets

react native 的代码片段

具体用法可参考官网

3 ReactJS

代码提示，高亮显示等官网：https://github.com/facebookarchive/sublime-react

4 Material Theme

提升逼格的插件，随意吧，效果图看前面。

5 Emmet

仿CSS选择器的语法来生成代码，主要用于提高HTML/CSS代码编写的速度。官网
配置：
菜单 preferences -> Key bindings - Users，把下面代码复制到[]内部

{
  "keys": [
    "super+e"
  ],
  "args": {
    "action": "expand_abbreviation"
  },
  "command": "run_emmet_action",
  "context": [{
    "key": "emmet_action_enabled.expand_abbreviation"
  }]
},
{
  "keys": ["tab"],
  "command": "expand_abbreviation_by_tab",
  "context": [{
    "operand": "source.js",
    "operator": "equal",
    "match_all": true,
    "key": "selector"
  }, {
    "key": "preceding_text",
    "operator": "regex_contains",
    "operand": "(\\b(a\\b|div|span|p\\b|button)(\\.\\w*|>\\w*)?([^}]*?}$)?)",
    "match_all": true
  }, {
    "key": "selection_empty",
    "operator": "equal",
    "operand": true,
    "match_all": true
  }]
}

使用CTRL+E启动。
更多插件看这里。

额外话

subline3设置自动保存功能

subline3默认关闭了自动保存功能，每次运行前都得ctrl+s非常不方便，要是忘了就更悲剧了。设置方式如下：

1. preferences ->settings

   
   
   

   最后一句后面追加："save_on_focus_lost": true，注意上一句后面的逗号。

   
   
   这样subline3就开启了自动保存功能了，再也不用按ctrl+s。