在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吧~~！歡迎各位大神來補充。