SublimeText React ES6 插件备忘

Font

• Roboto + Mono

• Monaco

• Source Code Pro

• Fira Code

• Consolas

---

Emmet

提升编写 html, css... 效率。

View In Browser

在浏览器打开页面。

CodeFormatter

代码格式化，使用这个插件我是拒绝的。。。

git clone https://github.com/akalongman/sublimetext-codeformatter.git

具体查看：
C:\\Users\your 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 3\Data\Packages
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

React语法高亮、代码提示...

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

es6/es201五、JSX代码高亮

设置①：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