Vim Snippets


Vim

Honza/vim-snippets is just a collection of snippet files — it doesn’t do anything by itself. You need a snippet engine (a plugin) to read and expand those snippets. Here’s how to set it up step by step.

Step 1: Pick a Snippet Engine

The repo supports several engines. Choose one:

Engine Language Best For Install
UltiSnips Python Vim with Python, most features SirVer/ultisnips
LuaSnip Lua Neovim, modern, fast L3MON4D3/LuaSnip
snipMate VimL Vim without Python garbas/vim-snipmate
nvim-snippy Lua Neovim, lightweight dcampos/nvim-snippy

Quick recommendation:

  • Using Neovim? → Use LuaSnip (it’s the standard now).
  • Using Vim with Python? → Use UltiSnips.
  • Using Vim without Python? → Use snipMate.

Step 2: Install the Engine + vim-snippets

You need both the engine plugin AND the honza/vim-snippets repo (which provides the actual HTML snippets).

If you use vim-plug (add to .vimrc or init.vim):

For LuaSnip (Neovim):

Plug 'L3MON4D3/LuaSnip'
Plug 'honza/vim-snippets'

For UltiSnips (Vim with Python):

Plug 'SirVer/ultisnips'
Plug 'honza/vim-snippets'

For snipMate (Vim without Python):

Plug 'garbas/vim-snipmate'
Plug 'honza/vim-snippets'

Then run :PlugInstall.

Step 3: Configure Expansion (The Important Part)

By default, you type the snippet name and hit a trigger key to expand it.

For UltiSnips (add to .vimrc):

" Trigger key for expanding snippets
let g:UltiSnipsExpandTrigger = "<tab>"

" Jump to next placeholder with tab
let g:UltiSnipsJumpForwardTrigger = "<tab>"
let g:UltiSnipsJumpBackwardTrigger = "<s-tab>"

For LuaSnip (add to init.vim / init.lua):

" Requires a bit more setup, here's the Vimscript version:
lua << EOF
require("luasnip").setup()
require("luasnip.loaders.from_snipmate").lazy_load() -- loads snippets/ folder
require("luasnip.loaders.from_vscode").lazy_load()   -- optional: VS Code snippets
EOF

" Keymaps to expand and jump
imap <silent><expr> <Tab> luasnip#expand_or_jumpable() ? '<Plug>luasnip-expand-or-jump' : '<Tab>'
smap <silent><expr> <Tab> luasnip#jumpable(1) ? '<Plug>luasnip-jump-next' : '<Tab>'

For snipMate:

snipMate works out of the box with <tab> once installed. No extra config needed.

Step 4: How to Use It

Open any .html file and type:

Type Then hit <tab> Expands to
p <tab> <p>|</p> (cursor inside)
br <tab> <br>
div <tab> <div>|</div>
a <tab> <a href="|">|</a>
img <tab> <img src="|" alt="|" />
html <tab> Full HTML5 boilerplate

The | shows where your cursor lands. Hit <tab> again to jump to the next placeholder.

What If You Want Your @p and @b Style Instead?

If you prefer your own @ prefix instead of typing p + tab, you have two options:

Option A: Custom snippets — Create your own snippet file that overrides or adds to the defaults.

Option B: Vim abbreviations (no plugins needed):

:iab @p <p></p><Esc>3hi
:iab @b <br>
:iab @div <div></div><Esc>4hi
:iab @a <a href=""></a><Esc>4hi

This is native Vim, zero plugins, works everywhere.

Quick Checklist

  1. ✅ Install a snippet engine (LuaSnip, UltiSnips, or snipMate)
  2. ✅ Install honza/vim-snippets
  3. ✅ Set your trigger key (usually <tab>)
  4. ✅ Open an HTML file and type p<Tab>

If you tell me which editor you’re using (Vim or Neovim) and your plugin manager, I can give you the exact config to copy-paste.