在SublimeText上配置ReactJS开发环境

安装包控制插件Package Manager
https://packagecontrol.io/installation#st2
打开控制台,粘帖下面一段
View > Show Console menu.
import urllib2,os,hashlib; h = ‘2915d1851351e5ee549c20394736b442’ + ‘8bc59f460fa1548d1514676163dafc88’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( ‘http://packagecontrol.io/’ + pf.replace(‘ ‘, ‘%20’)).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), ‘wb’ ).write(by) if dh == h else None; print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h) if dh != h else ‘Please restart Sublime Text to finish installation’)

Package Manager安装插件的用法
打开SublimeText,按commont+shift+p,输入package,然后选择package control install package,等一小下,会出现一个列表,里面就是插件库了,也就是这篇文章里指的插件库了http://segmentfault.com/a/1190000003954626

参考这篇文章http://segmentfault.com/a/1190000003954626
SublimeText插件安装方法
1 语法高亮
https://github.com/babel/babel-sublime
2 代码提示
https://github.com/reactjs/sublime-react
把他们clone下来,然后打开SublimeText->perferences->browse package
把下载好的文件夹整个复制到刚打开的目录下,重启SublimeText,
然后在view->syntax->babel-sublime->js(babel)
这时在编辑区输入rcc,会有提示,回车后相应的代码就出现了

3 JSX中使用Emmet
安装2个插件,从插件库中安装,上文已经说明插件库在哪里了。
安装RegReplace,Chain Of Command
在SublimeText设置,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
}]
}
然后在SublimeText设置,Package Setting –> Reg Replace –> Settings-User下复制下面代码
{
“replacements”: {
“js_class”: {
“find”: ” class=\””,
“replace”: ” className=\””,
“greedy”: true,
“case”: false
}
}
}
大功告成

下面是一些快捷键
Documentation of available snippets (JSX):
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.

http://www.cnblogs.com/lhb25/p/10-essential-sublime-text-plugins.html

发表评论?

0 条评论。

发表评论


注意 - 你可以用以下 HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>