React Plugins For Sublime Text3

This post summarizes some useful plugins for React developer who are using Sublime text3.

Sublime React Plugins

React ES6 Snippets

cdm→  componentDidMount: fn() { ... }

cdup→  componentDidUpdate: fn(pp, ps) { ... }

cs→  import cx from 'classnames';

cwm→  componentWillMount: fn() { ... }

cwr→  componentWillReceiveProps: fn(np) { ... }

cwu→  componentWillUpdate: fn(np, ns) { ... }

cwun→  componentWillUnmount: fn() { ... }

cx→  cx({ ... })

fdn→  React.findDOMNode(...)

fup→  forceUpdate(...)

gdp→  static defaultProps = { ... } 

gis→  getInitialState: fn() { return {...} } 

ism→  isMounted()

props→  this.props.

pt→  propTypes { ... }

rcc→  component skeleton

refs→  this.refs.

ren→  render: fn() { return ... }

rpc→  pure render component skeleton

rrc→  redux component skeleton

scu→  shouldComponentUpdate: fn(np, ns) { ... }

sst→  this.setState({ ... })

state→  this.state.

sublime-jsfmt

{
    // autoformat on save
    "autoformat": false,

    // array of extensions for autoformat
    "extensions": ["js", "sublime-settings"],

    // options for jsfmt
    "options": {
        "preset": "jquery",
        "indent": {
            "value": "    "
        },
        // plugins included
        "plugins": [
            // "esformatter-quotes",
            // "esformatter-semicolons",
            // "esformatter-braces",
            // "esformatter-dot-notation"
        ]
    },
    "options-JSON": {
        "plugins": [
            "esformatter-quotes"
        ],
        "quotes": {
            "type": "double"
        }
    },
    "alert-errors": true,
    // path to nodejs
    "node-path": "node",
    // if true it will format the whole file even if you have a selection active
    "ignore-selection": false
}

babel-sublime

Setting as the default syntax
To set it as the default syntax for a particular extension:

Open a file with that extension,
Select View from the menu,
Then Syntax -> Open all with current extension as… -> Babel -> JavaScript (Babel).
Repeat this for each extension (e.g.: .js and .jsx).

Emmet