sublime +react+es6开发环境

Babel

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

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

Babel

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

//支持的代码片段如下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 skeletonrefs→  this.refs.ren→  render: fn() { return ... }scu→  shouldComponentUpdate: fn(np, ns) { ... }sst→  this.setState({ ... })state→  this.state.

JsFormat

刚开始在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 eslintnpm install -g babel-eslintnpm install -g eslint-plugin-reactnpm 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关掉，否则报一堆警告错误。