脚本宝典收集整理的这篇文章主要介绍了SublimeText React ES6 插件备忘,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
Font
Consolas
Emmet
View In browser
在浏览器打开页面。
CodeFormatter
代码格式化,使用这个插件我是拒绝的。。。
gIT clone https://github.COM/akalongman/sublimetext-codeformatter.git
具体查看:
C:\Usersyour username\AppData\Roaming\Sublime Text 3\Packages\CodeFormatter\CodeFormatter.sublime-settings
Support javascript (babel)
Package Setings -> CodeFormatter -> Setings - User add:
{
"codeformatter_js_options": {
"syntaxes": "javascript (babel)",
}
}
SublimeLinter
代码检测
npm install eslint babel-eslint -g
install SublimeLinter, SublimeLinter-contrib-eslint
SCSS & LESS
sass, less.
HTMLAttributes
BracketHighlighter
FileHeader
自动更新保存时间,文件模板。
/*
* @Author: mgdev
* @Date: 2016-06-20 14:20:12
* @Last Modified by: mgdev
* @Last Modified time: 2016-06-20 14:20:12
*/
TrailingSpaces
高亮空格,专治强迫症。
LiveReload
浏览器中实时预览文件
cd E:PRogram Files (x86)Sublime Text 3DataPackages
git clone https://github.com/Grafikart/ST3-LiveReload.git LiveReload
配置1:
Preference>Package Settings>LiveReload>Settings User
{
"enabled_plugins": [
"SimpleReloadPlugin",
"SimpleRefresh"
]
}
配置2:
ctrl+shift+p
LiveReload: Enable/disable plugins
Enable - SimpleReload
配置好后,点 Chrome 网上应用店 安装 LiveReload.
ES6-Toolkit
ES6 的各种片段。
ReactJS SnipPEts
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.
React ES6 Snippets
ES6 Snippets,代码提示
Babel
设置①:view > Syntax > Babel > JavaScript (Babel)
设置②:点击编辑器右下角 > Babel > JavaScript (Babel)
Babel Snippets
React and React Router Snippets
Joe Maddalone 自己用的插件,可能是太好用了就分享出来了。不过确实好用!
React-Router
Trigger Description
link react-router Link
iroute Router.IndexRoute
ilink Router.IndexLink
redirect react-router Redirect
imrr import react-router
route Router.Route
router Router.Route
Trigger Description
onbl onBlur
onch onChange
oncl onClick
oncm onContextMenu
onco onCopy
onct onCut
ondc onDoubleClick
onde onDragEnd
onden onDragEnter
ondex onDragExit
ondl onDragLeave
ondo onDragOver
onds onDragStart
onfo onFocus
ondr onDrop
onin onInput
onkd onKeyDown
onkp onKeyPress
onku onKeyUp
onmd onMouseDown
onme onMouseEnter
onmm onMouSEMove
onml onMouseLeave
onmo onMouseOut
onmov onMouseOver
onmu onMouseUp
onpa onPaste
onsc onScroll
onsu onSubmit
ontc onTouchCancel
onte onTouchEnd
ontm onTouchMove
onts onTouchStart
rwc React withContext
onwh onWheel
Theme
Ayu
[ 使用中... ] 也是赞,主要是看得舒服,颜值还高,完美。
{
"color_scheme": "Packages/ayu/ayu-mirage.tmTheme",
"font_face": "Roboto Mono",
"font_size": 12,
"theme": "ayu-mirage.sublime-theme",
"ui_separator": true, // separators between panels
"ui_font_size_small": true, // smaller UI font size(sidebar, statusbar etc)
"ui_Big_tabs": true, // increased tab height
"ui_fix_tab_labels": true // to fix tab labels if they look not right
}
Boxy Theme
以上是脚本宝典为你收集整理的SublimeText React ES6 插件备忘全部内容,希望文章能够帮你解决SublimeText React ES6 插件备忘所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。