├── .gitignore ├── README.md ├── UltiSnips └── javascript.snippets └── snippets └── javascript.snippets /.gitignore: -------------------------------------------------------------------------------- 1 | *.swp 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | **Note: I've ported `/snippets` to es6 class usage. I've not touched `/UtiliSnips`.** 2 | 3 | 4 | vim-react-es6-snippets 5 | ================== 6 | 7 | A set of snippets for Vim to work with Facebook's [React](http://facebook.github.io/react/) library. 8 | 9 | A direct port of the awesome snippets from 10 | [justinj/vim-react-snippets](https://github.com/justinj/vim-react-snippets). 11 | 12 | Requires [vim-snipmate](https://github.com/garbas/vim-snipmate). 13 | 14 | Installation 15 | ============ 16 | 17 | Use your preferred Vim plugin installation method. Vundle or Pathogen should be fine (I use Pathogen). 18 | 19 | Usage 20 | ===== 21 | 22 | Within any Javascript or JSX file, you should be able to do the following: 23 | 24 | (in insert mode) 25 | ``` 26 | gdp 27 | ``` 28 | 29 | expanding to 30 | 31 | ``` 32 | getDefaultProps() { 33 | return { 34 | 35 | }; 36 | }, 37 | ``` 38 | 39 | And a bunch of others! 40 | Check `snippets/javascript.snippets` to see the full list. 41 | -------------------------------------------------------------------------------- /UltiSnips/javascript.snippets: -------------------------------------------------------------------------------- 1 | # 2 | # React snippets 3 | # 4 | 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() { 11 | ${1} 12 | },$0 13 | endsnippet 14 | 15 | snippet cdup "component did update" b 16 | componentDidUpdate: function(prevProps, prevState) { 17 | ${1} 18 | },$0 19 | endsnippet 20 | 21 | snippet cwm "component will mount" b 22 | componentWillMount: function() { 23 | ${1} 24 | },$0 25 | endsnippet 26 | 27 | snippet cwr "component will receive props" b 28 | componentWillReceiveProps: function(nextProps) { 29 | ${1} 30 | },$0 31 | endsnippet 32 | 33 | snippet cwun "component will unmount" b 34 | componentWillUnmount: function() { 35 | ${1} 36 | },$0 37 | endsnippet 38 | 39 | snippet cwu "component will update" b 40 | componentWillUpdate: function(nextProps, nextState) { 41 | ${1} 42 | },$0 43 | endsnippet 44 | 45 | snippet cx 46 | cx({ 47 | ${1}: ${2} 48 | }); 49 | endsnippet 50 | 51 | snippet fup 52 | forceUpdate(${1:callback}); 53 | endsnippet 54 | 55 | snippet gdp "get default props" b 56 | getDefaultProps: function() { 57 | return { 58 | ${1} 59 | }; 60 | },$0 61 | endsnippet 62 | 63 | snippet gis "get initial state" b 64 | getInitialState: function() { 65 | return { 66 | ${1}: ${2} 67 | }; 68 | },$0 69 | endsnippet 70 | 71 | snippet ism "is mounted" 72 | isMounted() 73 | endsnippet 74 | 75 | snippet jsx "define jsx dom" b 76 | /** 77 | * @jsx React.DOM 78 | */ 79 | endsnippet 80 | 81 | snippet pt "propTypes" b 82 | propTypes: { 83 | ${1}: React.PropTypes.${2:string} 84 | }, 85 | endsnippet 86 | 87 | snippet rcc "create class/component" b 88 | ${1:/** 89 | * @jsx React.DOM 90 | */ 91 | 92 | var React = require('React'); 93 | } 94 | var ${2:ClassName} = React.createClass({ 95 | 96 | render: function() { 97 | return ( 98 | ${VISUAL}$4 99 | ); 100 | } 101 | 102 | }); 103 | $0 104 | ${3:module.exports = $2;} 105 | endsnippet 106 | 107 | snippet ren 108 | render: function() { 109 | return ( 110 | ${1:
} 111 | ); 112 | }$0 113 | endsnippet 114 | 115 | snippet sst "set state" b 116 | this.setState({ 117 | ${1}: ${2} 118 | });$0 119 | endsnippet 120 | 121 | snippet scu "should component update" 122 | shouldComponentUpdate: function(nextProps, nextState) { 123 | ${1} 124 | },$0 125 | endsnippet 126 | 127 | snippet props "get property" i 128 | this.props.${1} 129 | endsnippet 130 | 131 | snippet state "get state" i 132 | this.state.${1} 133 | endsnippet 134 | 135 | snippet trp 136 | this.transferPropsTo(${VISUAL}$0); 137 | endsnippet 138 | -------------------------------------------------------------------------------- /snippets/javascript.snippets: -------------------------------------------------------------------------------- 1 | snippet cs 2 | var cx = React.addons.classSet; 3 | snippet cdm 4 | componentDidMount() { 5 | ${1} 6 | } 7 | snippet cdup 8 | componentDidUpdate(prevProps, prevState) { 9 | ${1} 10 | } 11 | snippet cwm 12 | componentWillMount() { 13 | ${1} 14 | } 15 | snippet cwr 16 | componentWillReceiveProps(nextProps) { 17 | ${1} 18 | } 19 | snippet cwun 20 | componentWillUnmount() { 21 | ${1} 22 | } 23 | snippet cwu 24 | componentWillUpdate(nextProps, nextState) { 25 | ${1} 26 | } 27 | snippet cx 28 | cx({ 29 | ${1}: ${2} 30 | }); 31 | snippet fup 32 | forceUpdate(${1:callback}); 33 | snippet gdp 34 | getDefaultProps() { 35 | return { 36 | ${1} 37 | }; 38 | } 39 | snippet gis 40 | getInitialState() { 41 | return { 42 | ${1}: ${2} 43 | }; 44 | } 45 | snippet ism 46 | isMounted() 47 | snippet jsx 48 | /** 49 | * @jsx React.DOM 50 | */ 51 | snippet pt 52 | propTypes: { 53 | ${1}: React.PropTypes.${2:string} 54 | } 55 | snippet rcc 56 | import React, { PropTypes, Component } from 'react' 57 | 58 | class _${1:ClassName} extends Component { 59 | 60 | render() { 61 | return ( 62 | ${0:
} 63 | ) 64 | } 65 | } 66 | 67 | _$1.propTypes = { 68 | 69 | } 70 | 71 | export default _$1 72 | snippet cc 73 | class _${1:ClassName} extends Component { 74 | 75 | render() { 76 | return ( 77 | ${0:
} 78 | ) 79 | } 80 | } 81 | 82 | export const $1 = _$1 83 | snippet slc 84 | const _${1:ClassName} = (props) => { 85 | return ( 86 | ${0:
} 87 | ) 88 | } 89 | 90 | _$1.propTypes = { 91 | 92 | } 93 | snippet rslc 94 | import React, { PropTypes } from 'react' 95 | 96 | const _${1:ClassName} = (props) => { 97 | return ( 98 | ${0:
} 99 | ) 100 | } 101 | 102 | _$1.propTypes = { 103 | 104 | } 105 | 106 | export default _$1 107 | snippet ren 108 | render() { 109 | return ( 110 | ${1:
} 111 | ); 112 | } 113 | snippet sst 114 | setState({ 115 | ${1}: ${2} 116 | }); 117 | snippet scu 118 | shouldComponentUpdate(nextProps, nextState) { 119 | ${1} 120 | } 121 | snippet props 122 | this.props.${1} 123 | snippet state 124 | this.state.${1} 125 | snippet trp 126 | transferPropsTo(${1}); 127 | --------------------------------------------------------------------------------