Snipets in vim / neovim

Carlos P. Jimeno
2 min readNov 18, 2018

--

TL/TR

I love snippets. They decrease my time typing code dramatically. This article will show an easy way to create your own and use them in vim / neovim.

Setting up snippets packages

I use the UltiSnips plugin to create and use snippets in vim so we need to add it to our config file and also the vim-snippets plugin.

  • To install them use your favourite plugin manager , I love to use Plug:

Note1: The config file in vim is located in ~./vimrc and the config file for neovim in ~/.config/nvim/init.vim.

Note2: In case you don’t have any plugin manager, install Plug following their repo installation guide.

  • Set your snippets location

You can set the snippets folder in your configuration file

  • Create your first snippet

Inside ~.vim/UltiSnips create a file named javascript.snippets (to use in javascript files) and add the following example:

The target is to:

  1. Type the snippet name
  2. Hit tab to write the snippet
  3. Hit tab again to jump to the next (2) location step and so on (Also usectrl + b to move steps backwards)
  • Add the configuration to use

To use it the way described before add the following to your vim config file:

  • Finally your config file should look like:

You should save your config file then type :so % to reload it and then type :PlugInstall to install the plugin.

Now you can create a JS file, type i hit tab and type what you want in the first position and then hit tab again to jump to the next position.

Final thoughts

I work as a frontend developer so if your are interested in react snippets and some others feel free to check mines here 🙃.

You are ready to go and try it 🚀! I hope it helps and you found something useful here.

In case you liked it this is part of a serie of articles I wrote about useful vim configurations. If you are interested you can check the others here:

🍻

--

--

Carlos P. Jimeno

Front End developer at @Influencity • Alunmi @ironhack • Crafting React Apps ⚛