Code Snippets With vim-vsnip

When you work with a language like Dart, you soon realize that you have a lot of boilerplate code.

For example, here is the skeleton code for a stateless Widget in Flutter:

class YellowBird extends StatefulWidget {
  const YellowBird({ Key key }) : super(key: key);

  @override
  _YellowBirdState createState() => _YellowBirdState();
}

class _YellowBirdState extends State<YellowBird> {
  @override
  Widget build(BuildContext context) {
    return Container(color: const Color(0xFFFFE306));
  }
}

A few code snippets would be helpful. I want to avoid having to type the boilerplate again and again.

vim-vsnip

After some consideration, I chose vim-vsnip. The plugin supports the Language Server Protocol and VSCode’s snippet format.
The author wrote vim-vsnip in VimScript. Thus, the plugin doesn’t need external dependencies like Python or Lua.

It also integrates with other plugins like vim-lsc or vim-lsp, if you are keen on auto-completion and code actions.

(image from the vim-vsnip GitHub repo)

Installation

You can use your favorite plugin manager, for example:

Plug 'hrsh7th/vim-vsnip'
Plug 'hrsh7th/vim-vsnip-integ'

Add key-bindings:

imap <expr> <C-j>   vsnip#available(1)  ? '<Plug>(vsnip-expand)'         : '<C-j>'
imap <expr> <C-l>   vsnip#available(1)  ? '<Plug>(vsnip-expand-or-jump)' : '<C-l>'
smap <expr> <C-l>   vsnip#available(1)  ? '<Plug>(vsnip-expand-or-jump)' : '<C-l>'

vim-snip-integ is required to integrate with Language Protocol plugins.

Add VSCode Plugins

Now you can install VSCode snippet plugins.

Let’s say you want to use the Awesome Flutter Snippets. Find the GitHub repo and add it with your plugin manager:

Plug 'Neevash/awesome-flutter-snippets'

Usage

After you’ve reloaded your Vim setup, you can do things like these:

statefullW

Now, in insert mode, hit CTRL+J to expand the selection and create a stateful Flutter Widget. For more shortcuts, you have to check the documentation of the snippet plugin.

Quirks

The Awesome Flutter Snippets work wonderfully out of the box, but I found that the integration with other plugins is sometimes wonky. For example, the JavaScript snippets are broken.

The reason is that .jsx or .tsx files are automatically sourced with the file type javascriptreact or typescriptreact. That enables further syntax highlighting. The snippet plugins for JavaScript only work with the file type javascript.

If you want to use the snippets, you have to change the file type back to JavaScript. Enter command mode (via : in normal mode) and type:

set ft=javascript

Further Reading

• Reddit
• vim-vsnip