在SublimeText上搭建ReactJS开发环境

编辑器选择

最近在学习ReactJS，这东西确实不错，可是在实际开发中却有不少问题。不是ReactJS自己的问题，而是开发环境，目前而言并没发现一个真正完美支持JSX语法的编辑器或IDE，这对于ReactJS开发者来讲无疑是一个很头疼的事情，以往所习惯的码字方式都要改变，基本上要纯手打，虽然纯手打能够帮助记忆代码，但在工做效率上却就会大打折扣。

HBuilder

以前一直用的是DCloud研发的Hbuilder来作WEB开发，可能不少人都不熟悉这个工具，简单说就是一个国产的WEB开发专用的IDE，集成了不少功能，习惯了以后工做效率确实提高很多。但Hbuilder在第三方插件方面比较弱，ReactJS的相关插件一个都没有，因而我只能换编辑器了。

Atom

如今的编辑器也不少，这里就不一一列举了。就目前我了解的来讲，支持JSX语法高亮、代码提示以及代码校验的插件很少。Atom上有一个比较完善的ReactJS插件ATOM REACT，试用了一下，确实功能挺多，让我小激动了一下。可是Atom的性能却让我很不爽，首先是内存占用太大，我用的OSX，内存一下飙到900M+，一个IDE都没这么占内存。其次就是编辑较大的文件就会卡顿，那敲代码的延迟感简直不能忍，因而我放弃了Atom，惋惜了这么好的一个插件。

SublimeText

这个编辑器就很少说明了，作WEB开发的多少都了解一些，我以前用过一段时间的SublimeText，以为找插件很麻烦，就投靠了能够一次搞定的HBuilder。如今从新启用了这个神器，由于我找到了几个很棒的ReactJS插件，下面就来具体说说。

SublimeText插件

作ReactJS开发最须要的无疑是这两条：语法高亮、代码提示，若是可以想Emmet那样自动扩展就更好了，这里我能够告诉你，确实能够实现。

语法高亮

Babel-Sublime插件很好的支持了JSX语法的高亮显示，连包裹在组件中的HTML标签都能实现高亮显示，具体的插件安装以及设置方法就很少说了，自行看GitHub上的介绍吧，很简单。

代码提示

Sublime-React插件严格的说并非一个代码提示插件，而是一个相似于Emmet的自动扩展代码插件，只须要简单敲几个字母而后按下TAB键就能自动扩展成你想要的完整代码片断，效果以下图所示。

//支持的代码片断以下
cdm→  componentDidMount: fn() { ... }
cdup→  componentDidUpdate: fn(pp, ps) { ... }
cs→  var cx = React.addons.classSet;
cwm→  componentWillMount: fn() { ... }
cwr→  componentWillReceiveProps: fn(np) { ... }
cwu→  componentWillUpdate: fn(np, ns) { ... }
cwun→  componentWillUnmount: fn() { ... }
cx→  cx({ ... })
fdn→  React.findDOMNode(...)
fup→  forceUpdate(...)
gdp→  getDefaultProps: fn() { return {...} } 
gis→  getInitialState: fn() { return {...} } 
ism→  isMounted()
props→  this.props.
pt→  propTypes { ... }
rcc→  component skeleton
refs→  this.refs.
ren→  render: fn() { return ... }
scu→  shouldComponentUpdate: fn(np, ns) { ... }
sst→  this.setState({ ... })
state→  this.state.

JSX中使用Emmet

虽然上面这个插件能够实现JSX的代码扩展，可是在JSX中包裹的HTML却不能直接支持Emmet，须要经过安装其余插件以及修改相应设置来实现。
首先是安装须要的插件：RegReplace和Chain Of Command，直接在插件库中搜索安装便可。
接下来就是设置了，先在KeyBinding – Users中插入下面这段代码：

{
    "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
    }]
  }

这样就实现了在JSX中按TAB键来扩展HTML片断了，可是JSX中的HTML和标准的HTML又有不一样的地方，就是HTML中的class，在JSX中是className，因此这里就须要修改RegReplace的设置，找到Packagea Setting --> Reg Replace --> Settings-User，插入下面这段代码：

{
    "replacements": {
        "js_class": {
            "find": " class=\"",
            "replace": " className=\"",
            "greedy": true,
            "case": false
        }
    }
}

这样就大功告成了，开始快乐的学习ReactJS吧~~！欢迎各位大神来补充。