Skip to content

Commit 53e803d

Browse files
justinjjustinj
authored
Merge pull request #8 from letientai299/es6
New branch, convert to es6 syntax, fix typo and add some more snippet.
2 parents 8ba184c + dc974c1 commit 53e803d

File tree

2 files changed

+110
-100
lines changed

2 files changed

+110
-100
lines changed

‎README.md

+36-38
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,30 @@
11
vim-react-snippets
22
==================
33

4-
A set of snippets for Vim to work with Facebook's [React](http://facebook.github.io/react/) library.
4+
A set of snippets for Vim to work with Facebook's
5+
[React](http://facebook.github.io/react/) library. This fork change the snippet
6+
syntax to ES6. Remove semicolon and comma. I also remove snippets related to
7+
[react-classset](https://github.com/petehunt/react-classset) as it is deprecated now.
58

6-
A direct port of the awesome snippets from
7-
[jgebhardt/sublime-react](https://github.com/jgebhardt/sublime-react).
9+
Require [UltiSnips](https://github.com/SirVer/ultisnips).
10+
I only update the `UltiSnips` version. Pull requests for
11+
[vim-snipmate](https://github.com/garbas/vim-snipmate) version are welcome.
812

9-
Requires [vim-snipmate](https://github.com/garbas/vim-snipmate) or [Ultisnips](https://github.com/SirVer/ultisnips).
1013

1114
Installation
1215
============
1316

14-
Use your preferred Vim plugin installation method.
15-
I like [Vundle](http://github.com/gmarik/vundle), but other options like
16-
[pathogen](https://github.com/tpope/vim-pathogen) should work fine as well.
17+
Use your preferred Vim plugin installation method. For me, I like
18+
[vim-plug](https://github.com/junegunn/vim-plug). If you also using `vim-plug`,
19+
put the following into your `.vimrc`.
1720

18-
####SnipMate
21+
````vimrc
22+
Plug 'SirVer/ultisnips'
1923
20-
If you're using Vundle, and you don't currently have SnipMate, you will need to
21-
add the following to your `.vimrc` (taken from the [SnipMate README](https://github.com/garbas/vim-snipmate/blob/master/README.md)):
22-
23-
```
24-
" vim-react-snippets:
25-
Bundle "justinj/vim-react-snippets"
26-
27-
" SnipMate and its dependencies:
28-
Bundle "MarcWeber/vim-addon-mw-utils"
29-
Bundle "tomtom/tlib_vim"
30-
Bundle "garbas/vim-snipmate"
31-
32-
" Other sets of snippets (optional):
33-
Bundle "honza/vim-snippets"
34-
```
35-
####Ultisnips
36-
37-
If you prefer to use `vim-react-snippets` with `Ultisnips`, put this in your .vimrc
38-
to install using Vundle
24+
" Currently, es6 version of snippets is available in es6 branch only
25+
Plug 'letientai299/vim-react-snippets', { 'branch': 'es6' }
3926
40-
````
41-
" vim-react-snippets:
42-
Bundle "justinj/vim-react-snippets"
43-
44-
" Ultisnips
45-
Bundle "SirVer/ultisnips"
46-
47-
" Other sets of snippets (optional):
48-
Bundle "honza/vim-snippets"
27+
Plug 'honza/vim-snippets' "optional
4928
````
5029

5130
Usage
@@ -61,12 +40,31 @@ gdp<Tab>
6140
expanding to
6241

6342
```
64-
getDefaultProps: function() {
43+
getDefaultProps() {
6544
return {
6645
6746
};
6847
},
6948
```
7049

50+
Another example:
51+
52+
```
53+
rcx<Tab>
54+
```
55+
56+
Expanding to
57+
58+
```
59+
class ClassName extends React.Component {
60+
render(){
61+
return (
62+
63+
)
64+
}
65+
}
66+
```
67+
7168
And a bunch of others!
72-
Check `snippets/javascript.snippets` to see the full list.
69+
70+
Check `./UltiSnips/javascript.snippets` to see the full list.

‎UltiSnips/javascript.snippets

+74-62
Original file line numberDiff line numberDiff line change
@@ -2,86 +2,76 @@
22
# React snippets
33
#
44

5-
snippet cs "React.addons.classSet" b
6-
var cx = React.addons.classSet;
7-
endsnippet
8-
9-
snippet cdm "component did mount" b
10-
componentDidMount: function() {
5+
snippet cdm "Component did mount" b
6+
componentDidMount() {
117
${1}
12-
},$0
8+
}$0
139
endsnippet
1410

15-
snippet cdup "component did update" b
16-
componentDidUpdate: function(prevProps, prevState) {
11+
snippet cdup "Component did update" b
12+
componentDidUpdate(prevProps, prevState) {
1713
${1}
18-
},$0
14+
}$0
1915
endsnippet
2016

21-
snippet cwm "component will mount" b
22-
componentWillMount: function() {
17+
snippet cwm "Component will mount" b
18+
componentWillMount() {
2319
${1}
24-
},$0
20+
}$0
2521
endsnippet
2622

27-
snippet cwr "component will receive props" b
28-
componentWillReceiveProps: function(nextProps) {
23+
snippet cwr "Component will receive props" b
24+
componentWillReceiveProps(nextProps) {
2925
${1}
30-
},$0
26+
}$0
3127
endsnippet
3228

33-
snippet cwun "component will unmount" b
34-
componentWillUnmount: function() {
29+
snippet cwun "Component will unmount" b
30+
componentWillUnmount() {
3531
${1}
36-
},$0
32+
}$0
3733
endsnippet
3834

39-
snippet cwu "component will update" b
40-
componentWillUpdate: function(nextProps, nextState) {
35+
snippet cwu "Component will update" b
36+
componentWillUpdate(nextProps, nextState) {
4137
${1}
42-
},$0
43-
endsnippet
44-
45-
snippet cx
46-
cx({
47-
${1}: ${2}
48-
});
38+
}$0
4939
endsnippet
5040

51-
snippet fup
52-
forceUpdate(${1:callback});
41+
snippet fup "Force update"
42+
forceUpdate(${1:callback})
5343
endsnippet
5444

55-
snippet gdp "get default props" b
56-
getDefaultProps: function() {
45+
snippet gdp "Get default props" b
46+
getDefaultProps() {
5747
return {
5848
${1}
59-
};
60-
},$0
49+
}
50+
}$0
6151
endsnippet
6252

63-
snippet gis "get initial state" b
64-
getInitialState: function() {
53+
snippet gis "Get initial state" b
54+
getInitialState() {
6555
return {
6656
${1}: ${2}
67-
};
68-
},$0
57+
}
58+
}$0
6959
endsnippet
7060

71-
snippet ism "is mounted"
61+
snippet ism "Is mounted"
7262
isMounted()
7363
endsnippet
7464

75-
snippet jsx "define jsx dom" b
65+
snippet jsx "Define jsx dom" b
7666
/**
7767
* @jsx React.DOM
7868
*/
7969

80-
var React = require('react');
81-
}
82-
var ${2:ClassName} = React.createClass({
70+
import React from 'react';
8371

84-
render: function() {
72+
let ${2:ClassName} = React.createClass({
73+
74+
render() {
8575
return (
8676
${VISUAL}$4
8777
);
@@ -95,50 +85,72 @@ endsnippet
9585
snippet pt "propTypes" b
9686
propTypes: {
9787
${1}: React.PropTypes.${2:string}
98-
},
88+
}
9989
endsnippet
10090

101-
snippet rcc "create class/component" b
102-
var ${1:ClassName} = React.createClass({
91+
snippet rcc "React.createClass" b
92+
let ${1:ClassName} = React.createClass({
10393

104-
render: function() {
94+
render() {
10595
return (
10696
${VISUAL}$2
107-
);
97+
)
10898
}
10999

110-
});
100+
})
111101
$0
112102
endsnippet
113103

114-
snippet ren
115-
render: function() {
104+
snippet rcx "Extends React.Component" b
105+
class ${1:ClassName} extends React.Component {
106+
render(){
107+
return (
108+
$2
109+
)
110+
}
111+
}
112+
endsnippet
113+
114+
snippet ren "render"
115+
render() {
116116
return (
117117
${1:<div />}
118-
);
118+
)
119119
}$0
120120
endsnippet
121121

122-
snippet sst "set state" b
122+
snippet sst "Set state" b
123123
this.setState({
124124
${1}: ${2}
125-
});$0
125+
})$0
126126
endsnippet
127127

128-
snippet scu "should component update"
129-
shouldComponentUpdate: function(nextProps, nextState) {
128+
snippet scu "Should component update"
129+
shouldComponentUpdate(nextProps, nextState) {
130130
${1}
131-
},$0
131+
}$0
132132
endsnippet
133133

134-
snippet props "get property" i
134+
snippet props "Get property" i
135135
this.props.${1}
136136
endsnippet
137137

138-
snippet state "get state" i
138+
snippet state "Get state" i
139139
this.state.${1}
140140
endsnippet
141141

142-
snippet trp
143-
this.transferPropsTo(${VISUAL}$0);
142+
snippet trp "Transfer props to"
143+
this.transferPropsTo(${VISUAL}$0)
144+
endsnippet
145+
146+
# This snippet will only works if the keyword 'con' is the first word of line
147+
snippet con "Constructor for React.Component" b
148+
constructor(props, context) {
149+
super(props, context)
150+
151+
this.state = {
152+
$1: $2
153+
}
154+
}$0
155+
144156
endsnippet

0 commit comments

Comments
 (0)