diff --git a/README.md b/README.md index fe37786..cc193bc 100644 --- a/README.md +++ b/README.md @@ -1,51 +1,30 @@ vim-react-snippets ================== -A set of snippets for Vim to work with Facebook's [React](http://facebook.github.io/react/) library. +A set of snippets for Vim to work with Facebook's +[React](http://facebook.github.io/react/) library. This fork change the snippet +syntax to ES6. Remove semicolon and comma. I also remove snippets related to +[react-classset](https://github.com/petehunt/react-classset) as it is deprecated now. -A direct port of the awesome snippets from -[jgebhardt/sublime-react](https://github.com/jgebhardt/sublime-react). +Require [UltiSnips](https://github.com/SirVer/ultisnips). +I only update the `UltiSnips` version. Pull requests for +[vim-snipmate](https://github.com/garbas/vim-snipmate) version are welcome. -Requires [vim-snipmate](https://github.com/garbas/vim-snipmate) or [Ultisnips](https://github.com/SirVer/ultisnips). Installation ============ -Use your preferred Vim plugin installation method. -I like [Vundle](http://github.com/gmarik/vundle), but other options like -[pathogen](https://github.com/tpope/vim-pathogen) should work fine as well. +Use your preferred Vim plugin installation method. For me, I like +[vim-plug](https://github.com/junegunn/vim-plug). If you also using `vim-plug`, +put the following into your `.vimrc`. -####SnipMate +````vimrc +Plug 'SirVer/ultisnips' -If you're using Vundle, and you don't currently have SnipMate, you will need to -add the following to your `.vimrc` (taken from the [SnipMate README](https://github.com/garbas/vim-snipmate/blob/master/README.md)): - -``` -" vim-react-snippets: -Bundle "justinj/vim-react-snippets" - -" SnipMate and its dependencies: -Bundle "MarcWeber/vim-addon-mw-utils" -Bundle "tomtom/tlib_vim" -Bundle "garbas/vim-snipmate" - -" Other sets of snippets (optional): -Bundle "honza/vim-snippets" -``` -####Ultisnips - -If you prefer to use `vim-react-snippets` with `Ultisnips`, put this in your .vimrc -to install using Vundle +" Currently, es6 version of snippets is available in es6 branch only +Plug 'letientai299/vim-react-snippets', { 'branch': 'es6' } -```` -" vim-react-snippets: -Bundle "justinj/vim-react-snippets" - -" Ultisnips -Bundle "SirVer/ultisnips" - -" Other sets of snippets (optional): -Bundle "honza/vim-snippets" +Plug 'honza/vim-snippets' "optional ```` Usage @@ -61,12 +40,31 @@ gdp expanding to ``` -getDefaultProps: function() { +getDefaultProps() { return { }; }, ``` +Another example: + +``` +rcx +``` + +Expanding to + +``` +class ClassName extends React.Component { + render(){ + return ( + + ) + } +} +``` + And a bunch of others! -Check `snippets/javascript.snippets` to see the full list. + +Check `./UltiSnips/javascript.snippets` to see the full list. diff --git a/UltiSnips/javascript.snippets b/UltiSnips/javascript.snippets index 7584b2c..7355e9e 100644 --- a/UltiSnips/javascript.snippets +++ b/UltiSnips/javascript.snippets @@ -2,86 +2,76 @@ # React snippets # -snippet cs "React.addons.classSet" b -var cx = React.addons.classSet; -endsnippet - -snippet cdm "component did mount" b -componentDidMount: function() { +snippet cdm "Component did mount" b +componentDidMount() { ${1} -},$0 +}$0 endsnippet -snippet cdup "component did update" b -componentDidUpdate: function(prevProps, prevState) { +snippet cdup "Component did update" b +componentDidUpdate(prevProps, prevState) { ${1} -},$0 +}$0 endsnippet -snippet cwm "component will mount" b -componentWillMount: function() { +snippet cwm "Component will mount" b +componentWillMount() { ${1} -},$0 +}$0 endsnippet -snippet cwr "component will receive props" b -componentWillReceiveProps: function(nextProps) { +snippet cwr "Component will receive props" b +componentWillReceiveProps(nextProps) { ${1} -},$0 +}$0 endsnippet -snippet cwun "component will unmount" b -componentWillUnmount: function() { +snippet cwun "Component will unmount" b +componentWillUnmount() { ${1} -},$0 +}$0 endsnippet -snippet cwu "component will update" b -componentWillUpdate: function(nextProps, nextState) { +snippet cwu "Component will update" b +componentWillUpdate(nextProps, nextState) { ${1} -},$0 -endsnippet - -snippet cx -cx({ - ${1}: ${2} -}); +}$0 endsnippet -snippet fup -forceUpdate(${1:callback}); +snippet fup "Force update" +forceUpdate(${1:callback}) endsnippet -snippet gdp "get default props" b -getDefaultProps: function() { +snippet gdp "Get default props" b +getDefaultProps() { return { ${1} - }; -},$0 + } +}$0 endsnippet -snippet gis "get initial state" b -getInitialState: function() { +snippet gis "Get initial state" b +getInitialState() { return { ${1}: ${2} - }; -},$0 + } +}$0 endsnippet -snippet ism "is mounted" +snippet ism "Is mounted" isMounted() endsnippet -snippet jsx "define jsx dom" b +snippet jsx "Define jsx dom" b /** * @jsx React.DOM */ -var React = require('react'); -} -var ${2:ClassName} = React.createClass({ +import React from 'react'; -render: function() { +let ${2:ClassName} = React.createClass({ + +render() { return ( ${VISUAL}$4 ); @@ -95,50 +85,72 @@ endsnippet snippet pt "propTypes" b propTypes: { ${1}: React.PropTypes.${2:string} -}, +} endsnippet -snippet rcc "create class/component" b -var ${1:ClassName} = React.createClass({ +snippet rcc "React.createClass" b +let ${1:ClassName} = React.createClass({ -render: function() { +render() { return ( ${VISUAL}$2 - ); + ) } -}); +}) $0 endsnippet -snippet ren -render: function() { +snippet rcx "Extends React.Component" b +class ${1:ClassName} extends React.Component { + render(){ + return ( + $2 + ) + } +} +endsnippet + +snippet ren "render" +render() { return ( ${1:
} - ); + ) }$0 endsnippet -snippet sst "set state" b +snippet sst "Set state" b this.setState({ ${1}: ${2} -});$0 +})$0 endsnippet -snippet scu "should component update" -shouldComponentUpdate: function(nextProps, nextState) { +snippet scu "Should component update" +shouldComponentUpdate(nextProps, nextState) { ${1} -},$0 +}$0 endsnippet -snippet props "get property" i +snippet props "Get property" i this.props.${1} endsnippet -snippet state "get state" i +snippet state "Get state" i this.state.${1} endsnippet -snippet trp -this.transferPropsTo(${VISUAL}$0); +snippet trp "Transfer props to" +this.transferPropsTo(${VISUAL}$0) +endsnippet + +# This snippet will only works if the keyword 'con' is the first word of line +snippet con "Constructor for React.Component" b +constructor(props, context) { + super(props, context) + + this.state = { + $1: $2 + } +}$0 + endsnippet