Babel Snippets
Next generation JavaScript and React snippets for Sublime
Details
Installs
- Total 168K
- Win 75K
- Mac 67K
- Linux 26K
Feb 26 | Feb 25 | Feb 24 | Feb 23 | Feb 22 | Feb 21 | Feb 20 | Feb 19 | Feb 18 | Feb 17 | Feb 16 | Feb 15 | Feb 14 | Feb 13 | Feb 12 | Feb 11 | Feb 10 | Feb 9 | Feb 8 | Feb 7 | Feb 6 | Feb 5 | Feb 4 | Feb 3 | Feb 2 | Feb 1 | Jan 31 | Jan 30 | Jan 29 | Jan 28 | Jan 27 | Jan 26 | Jan 25 | Jan 24 | Jan 23 | Jan 22 | Jan 21 | Jan 20 | Jan 19 | Jan 18 | Jan 17 | Jan 16 | Jan 15 | Jan 14 | Jan 13 | Jan 12 | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | 17 | 34 | 36 | 47 | 30 | 23 | 25 | 25 | 36 | 27 | 27 | 27 | 18 | 17 | 20 | 24 | 28 | 30 | 23 | 20 | 33 | 35 | 38 | 34 | 31 | 27 | 21 | 27 | 26 | 30 | 33 | 37 | 32 | 19 | 25 | 26 | 36 | 31 | 33 | 35 | 31 | 22 | 23 | 29 | 35 | 40 |
Mac | 4 | 20 | 13 | 28 | 11 | 12 | 5 | 16 | 23 | 24 | 11 | 19 | 14 | 9 | 17 | 22 | 17 | 19 | 16 | 14 | 13 | 20 | 11 | 18 | 28 | 19 | 13 | 3 | 11 | 17 | 20 | 20 | 17 | 7 | 14 | 20 | 22 | 15 | 14 | 20 | 11 | 15 | 17 | 17 | 26 | 19 |
Linux | 2 | 10 | 10 | 6 | 10 | 11 | 7 | 6 | 12 | 14 | 9 | 12 | 4 | 4 | 4 | 6 | 16 | 11 | 5 | 4 | 7 | 9 | 10 | 9 | 8 | 7 | 12 | 6 | 9 | 8 | 22 | 11 | 11 | 10 | 6 | 13 | 7 | 6 | 5 | 14 | 13 | 6 | 9 | 10 | 8 | 11 |
Readme
- Source
- raw.githubusercontent.com
babel-sublime-snippets
Sublime snippets for React in ES5 and ES6 flavors.
Installation
Find it as Babel Snippets through Package Control.
Using the “React: wrap in a component” snippet
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"
}
}
Available snippets
React
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 |
Notes
- Unsupported React API snippets:
displayName
,forceUpdate
,getDOMNode
(useReact.findDOMNode
),ismounted
,mixins
,replaceProps
,replaceState
,setProps
,statics
.