vim-react-snippets

Useful snippets for developing in react and flux. Also a place for me to list which vim plugins I think are useful to use in unison.

Currently the snippets are only developed for UltiSnips

The idea for these snippets came from vim-react-snippets. I ended up using most of his snippets and then create a few more for the PropTypes and some fluxification.

Examples

rce<tab>

expands to

var ClassName = React.createClass({
  
  render: function() {
    return (
      <div />
    );
  }
});

module.exports = ClassName;

Where you can tab through and change the ClassName, add more class properties, and then update the render funciton.

rc<tab> will generate the same code as above without the module.exports.

rv<tab>

expands to

var = require('./');

When you start type the variable name, it will also set it as the requiring. You can tab and change the ./ and then tab again to change the required file

Properties

A few examples with the react properties.

optionalString: pt.s<tab>

expands to

optionalString: React.PropTypes.string

Another example:

requiredObjectOfString: pt.oo<tab>

expands to

requiredObjectOfString: React.PropTypes.objectOf(React.PropTypes.string).isRequired

Where the React.PropTypes.String is now replacable

View the UltiSnips/javascripts.vim for all the available snippets.

Installation

vundle

If you have never used Vundle, here are the simple steps to use.

Install Vundle

$ git clone https://github.com/gmarik/Vundle.vim.git ~/.vim/bundle/vundle

Configure your .vimrc

set nocompatible
filetype off
set rtp+=~/.vim/bundle/vundle
call vundle#rc()
Plugin 'gmarik/vundle' " required

" UltiSnips
Plugin 'SirVer/ultisnips'

Plugin 'mlaursen/vim-react-snippets'

call vundle#end()           " required
filetype plugin indent on   " required
" The rest of your .vimrc config
```

Save an then run :PluginInstall which will automatically clone each repo into ~/.vim/bundle.
Once it has finished, restart vim and your plugins will be ready to use.

If you are on cygwin, you need to run

find ~/.vim/bundle/. -name '*.vim' -exec dos2unix {} \; && \
dos2unix ~/.vim/bundle/YouCompleteMe/install.sh

pathogen

If you have never used pathogen, here are the simple steps to use.

Install pathogen (taken directly from the github page)

mkdir -p ~/.vim/autoload ~/.vim/bundle && \
curl -LSso ~/.vim/autoload/pathogen.vim https://tpo.pe/pathogen.vim

Update your .vimrc
```
execute pathogen#infect()
```

Clone each plugin into your ~./vim/bundle directory

git clone https://github.com/SirVer/ultisnips ~/.vim/bundle/ultisnips
git clone https://github.com/mlaursen/vim-react-snippets ~/.vim/bundle/vim-react-snippets

And you should be good to go.

Recommended Configurations and additional plugins

Plugins

Vundle - vim plugin manager
Command-T - Awesome file manager. (Requires vim with ruby support)
NERD Tree - File Browser
NERD Tree with Git - Plugin for NERDTree for Git.. (kind of obvious, right?)
vim-fugitive - Git VIM Plugin
vim-surround - Neat surrounder stuff.
supertab - Helps with ultisnips and YouCompleteMe working together
ultisnips - The awesome snippets
vim-javascript - Javascript syntax highlighting and stuffs
vim-jsx - JSX syntax helper with indentation and stuffs
YouCompleteMe - Freaking dope auto completer.

Copy/Paste Plugins for .vimrc

Plugin 'wincent/command-t'
Plugin 'scrooloose/nerdtree'
Plugin 'Xuyuanp/nerdtree-git-plugin'
Plugin 'tpope/vim-fugitive'
Plugin 'tpope/vim-surround'

Plugin 'ervandew/supertab'             " helps if using ultisnips and YouCompleteMe
Plugin 'SirVer/ultisnips'

" Existing snippets from other sources. Optional
Plugin 'honza/vim-snippets'

" React plugins and snippets
Plugin 'pangloss/vim-javascript'
Plugin 'mxw/vim-jsx'
Plugin 'mlaursen/vim-react-snippets'

" Completion menu
Plugin 'Valloric/YouCompleteMe'         " requires python and a build after install

These plugins will require.. libgmp, cmake libgcc

####To install vim with extra support..

hg clone https://vim.googlecode.com/hg/ vim
cd vim
./configure --enable-rubyinterp --enable-perlinterp --enable-pythoninterp --enable-gui=no --enable-multibyte
make && make install

####To install YouCompleteMe Cygwin Fix

Edit /YouCompleteMe/third_party/ycmd/cpp/BoostParts/boost/python/detail/wrap_python.hpp and remove the defined(CYGWIN) references

cd ~/.vim/bundle/YouCompleteMe
./install.sh

To Install Command-T

cd ~/.vim/bundle/command-t/ruby/command-t
ruby extconf.rb
make

Configuration

" Ignore libs, and builds for Command-T
let g:CommandTWildIgnore=&wildignore . ",**/bower_components/*,**/node_modules/*,**/lib/*,**/target/*,**/dist/*,**/build/*"
let g:CommandTTraverseSCM="pwd"  " gets files from current directory instead of searching for .git folder

" Make YCM compatible with UltiSnips (with supertab)
let g:ycm_key_list_select_completion=['<C-n>', '<Down>']
let g:ycm_key_list_previous_completion=['<C-p>', '<Up>']
let g:SuperTabDefaultCompletionType='<C-n>'

" update key bindings for UltiSnips
let g:UltiSnipsExpandTrigger="<tab>"
let g:UltiSnipsListSnippets="<c-h>"
let g:UltiSnipsJumpForwardTrigger="<tab>"
let g:UltiSnipsJumpBackwardTrigger="<s-tab>"
let g:UltiSnipsEditSplit="vertical"

Cheatsheet

PropTypes

Shortcut	Expands To
pt.a	React.PropTypes.array
pt.ar	React.PropTypes.array.isRequired
pt.b	React.PropTypes.bool
pt.br	React.PropTypes.bool.isRequired
pt.f	React.PropTypes.func
pt.fr	React.PropTypes.func.isRequired
pt.nu	React.PropTypes.number
pt.nur	React.PropTypes.number.isRequired
pt.o	React.PropTypes.object
pt.or	React.PropTypes.object.isRequired
pt.s	React.PropTypes.string
pt.sr	React.PropTypes.string.isRequired
pt.no	React.PropTypes.node
pt.nor	React.PropTypes.node.isRequired
pt.e	React.PropTypes.element
pt.er	React.PropTypes.element.isRequired
pt.ao	React.PropTypes.arrayOf
pt.aor	React.PropTypes.arrayOf.isRequired
pt.io	React.PropTypes.instanceOf
pt.ior	React.PropTypes.instanceOf.isRequired
pt.oo	React.PropTypes.objectOf
pt.oor	React.PropTypes.objectOf.isRequired

AnthonyRinaldi/vim-react-snippets

vim-react-snippets

Examples

Properties

Installation

vundle

pathogen

Recommended Configurations and additional plugins

Plugins

Copy/Paste Plugins for .vimrc

Configuration

Cheatsheet

PropTypes