Babel Snippets

by babel ALL

Next generation JavaScript and React snippets for Sublime

Details

Sublime snippets for React in ES5 and ES6 flavors.

First, select a block of JSX. Then, from the Command Palette select “React: wrap in a component”. Or, you can set up a key binding.

To set a key binding, go to “Preferences: Key Bindings - User” from the Command Palette and add an entry like this:

{
  "keys": ["ctrl+shift+,"],
  "command": "insert_snippet",
  "args": {
    "name": "Packages/Babel Snippets/react_wrap.sublime-snippet"
  }
}

Trigger	Content
`rcc→`	class component skeleton
`rcc→`	legacy component skeleton
`cdm→`	`componentDidMount() {…}`
`cdup→`	`componentDidUpdate(prevProps, prevState) {…}`
`cwm→`	`componentWillMount() {…}`
`cwr→`	`componentWillReceiveProps(nextProps) {…}`
`cwun→`	`componentWillUnmount() {…}`
`cwup→`	`componentWillUpdate(nextProps, nextState) {…}`
`fdn→`	`React.findDOMNode(…)`
`gdp→`	`getDefaultProps() {…}`
`gis→`	`getInitialState() {…}`
`ren→`	`render() {…}`
`sst→`	`this.setState(…)`
`scu→`	`shouldComponentUpdate(nextProps, nextState) {…}`
`props→`	`this.props`
`state→`	`this.state`
`pt→`	`propTypes { ... }`
`pta→`	`PropTypes.arrayOf`
`ptai→`	`PropTypes.arrayOf (Instances)`
`ptb→`	`PropTypes.bool`
`pte→`	`PropTypes.element`
`ptf→`	`PropTypes.func`
`pti→`	`PropTypes.instanceOf`
`ptn→`	`PropTypes.number`
`ptn→`	`PropTypes.node`
`pto→`	`PropTypes.object`
`ptof→`	`PropTypes.oneOf (Enum)`
`ptof→`	`PropTypes.objectOf`
`ptoft→`	`PropTypes.oneOfType (Union)`
`pts→`	`PropTypes.string`
`ptsp→`	`PropTypes.shape`

Unsupported React API snippets: displayName, forceUpdate, getDOMNode (use React.findDOMNode), ismounted, mixins, replaceProps, replaceState, setProps, statics.