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