sublime-react

Snippets and syntax highlighting for React.js / JSX.

Installation

Install the React package via Sublime's Package Manager

You will need the Sublime Package Manager.

Open the command palette: ⌘+shift+p on MacOS/Linux, ctrl+shift+p on Windows
type install, select Package Control: Install Package
type React, select ReactJS

Usage

Syntax highlighting

JSX syntax highlighting provided by yungsters/sublime

To default to JSX highlighting, open a .js or .jsx file, then select from the main menu:

View > Syntax > Open all with current extension as... > JavaScript (JSX)

JSX is fully compatible with plain JavaScript.

Snippets

It's easy! Simply activate snippets by typing a mnemonic followed by TAB.

Available snippets:

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

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

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

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

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

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

    fup→  forceUpdate(...)

    gdp→  getDefaultProps: fn() { return {...} } 

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

    ism→  isMounted()

    rcc→  component skeleton

     pt→  propTypes { ... }

    jsx→  /** @jsx */

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

    sst→  setState({ ... })

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

  props→  this.state.

  state→  this.state.

    trp→  transferPropsTo( ... )

erikbrannstrom / sublime-react