Language definitions for ES6 JavaScript with React JSX syntax extensions, and snippets for common React constructs (like lifecycle methods) in ES6.
Find it as 6to5 through Package Control.
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...
->
JavaScript 6to5
. - Repeat this for each extension (e.g.:
.js
and.jsx
).
6to5
comes bundled with Next
and Monokai
from Benvie/JavaScriptNext.tmLanguage. Select one from Preferences
->
Color Scheme
->
6to5
(6to5-sublime
vs sublime-react
)
Trigger | Content |
---|---|
cdm→ |
componentDidMount() { ... }, |
cdup→ |
componentDidUpdate(prevProps, prevState) { ... }, |
cs→ |
var cx = React.addons.classSet; |
cwm→ |
componentWillMount() { ... }, |
cwr→ |
componentWillReceiveProps(nextProps) { ... }, |
cwun→ |
componentWillUnmount() { ... }, |
cwu→ |
componentWillUpdate(nextProps, nextState) { ... }, |
cx→ |
cx({ ... }); |
fup→ |
this.forceUpdate(...); |
gdn→ |
this.getDOMNode() |
gdp→ |
getDefaultProps() { return {...}; }, |
gis→ |
getInitialState() { return {...}; }, |
ism→ |
this.isMounted() |
props→ |
this.props. |
pt→ |
propTypes: { ...: React.PropTypes. }, |
rcc→ |
component skeleton |
ren→ |
render() { return (...); } |
scu→ |
shouldComponentUpdate(nextProps, nextState) { ... }, |
sst→ |
this.setState({ ... }); |
state→ |
this.state. |
Under the hood, 6to5-sublime is based on the excellent Benvie/JavaScriptNext.tmLanguage with JSX syntax support built on top. The initial definitions for JSX came from reactjs/sublime-react via yungters/sublime - but we've added a few improvements like support for JSX namespaces and comments between JSX attributes.
Pull Requests should include your changes to the respective YAML-tmKittens
file as well as the converted tmKittens
file. Use AAAPackageDev to convert the YAML-tmKittens
files.