Sublime3才有的插件，支持ES6、JSX語法高亮。

菜單->View->Syntax->Open all with current extension as...->Babel->JavaScript(Babel) 高亮了有木有。

//支持的代碼片段如下
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文件格式化後慘不忍睹，其實配置一個屬性就可以支持JSX語法格式化。

菜單->Preferences->Package Settings->JsFormat->Settings-User加入以下代碼

{
  "e4x": true,//支持jsx格式化
  "format_on_save": true//保存立即格式化，看個人喜好
}  

Emmet

這個html標簽自動補全的神插件相信很多人都用上了，非常便捷，現在可以通過配置實現JSX的html內容自動補全。

菜單->Preferences->Key Bindings - User加上以下代碼（keys就是觸發自動補全的按鍵，可自定義）

[{
  "keys": [
    "tab"
  ],
  "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
  }]
}]
 

1.首先安裝SublimeLinter、SublimeLinter-jshint、SublimeLinter-jsxhint、SublimeLinter-contrib-eslint插件。

2.然後命令行全局安裝

npm install -g eslint
npm install -g babel-eslint
npm install -g eslint-plugin-react
npm install -g jsxhint

3.以ES6語法檢查為例，在項目工程根目錄新建.eslintrc,輸入

{
"parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
        "jsx": true
    }
},
"rules": {
    "semi": ["error", "always"]
    }
}

詳細配置參考 http://eslint.org/docs/user-guide/configuring

4.打開Sublime3，菜單->Tools->SublimeLinter->Toggle Linter...就可以打開js、jsx、es6檢查規則。註意：當使用es6開發時務必把jshint關掉，否則報一堆警告錯誤。

sublime +react+es6開發環境