sublime配置react开发环境

参考http://segmentfault.com/a/1190000003954626

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

}

}

}

另外几个可选的package

babel

oceanic next color scheme

jsxhint

这样就大功告成了，开始快乐的学习ReactJS吧~~！