---
title: Type less with Code Snippets
date: 2026-02-05
tags:
  - VSCode
  - Neovim
  - Workflow
  - Markdown
lang: en
excerpt: "Developers often face repetitive coding patterns, ranging from standard if/for structures to Go's error handling or HTML boilerplates. This redundancy is inefficient and error-prone. Snippets offer the optimal solution. When you type a short prefix (e.g., if, for), your IDE suggests a completion item that can be expanded into a predefined code template."
---

## Build Your First Snippet

> Code snippets are templates that simplify entering repetitive code patterns, such as loops or conditional statements.

To create a snippet:

1. Press <kbd>Ctrl + Shift + P</kbd> to open the Command Palette and search for "Configure User Snippets".
2. Select snippets' scope:
   - **Global:** Available in all file types.
   - **Language-specific:** Restricted to specific languages (e.g., JavaScript only).

After you select a snippet scope in VS Code, the editor will automatically create or open a corresponding JSON file: the file is named after the associated language (e.g., `markdown.json` for Markdown), while global snippets are stored in a dedicated `global.json` file.

A snippet file allows you to define multiple snippets. Each entry follows this structure:

| Property               | Description                                          |
| :--------------------- | :--------------------------------------------------- |
| `{json} "prefix"`      | **Trigger:** The keyword(s) to activate the snippet. |
| `{json} "body"`        | **Content:** The code array (supports multi-line).   |
| `{json} "description"` | **Tooltip:** Optional hint shown in Completion menu. |

Let's start with 2 scenarios:

<script data-swup-reload-script type="module" src="/js/components/accordion.js"></script>

<x-accordion>
  <accordion-item title="Scenario 1: Embedding a WebM Video">

  Sometimes, I insert animated images in WebM format into my Markdown posts. The standard HTML structure is a little bit verbose:

```html
<video autoplay loop muted playsinline>
  <source src="https://assets.vluv.space/job_control.webm" type="video/webm">
</video>
```

  </accordion-item>
  <accordion-item title="Scenario 2: Custom Accordion Element"

  I have a custom accordion element in my project. It accepts two placeholders: `$1` for the title and `$2` for the content.

```html
<x-accordion>
  <accordion-item title="What'you Name?">
    My name is GnixAij.
  </accordion-item>
</x-accordion>
```

  </accordion-item>
</x-accordion>

So I write some snippet in my `markdown.json` with which I can easily insert HTML template by typing the prefix and accpet the completion result.

::: tabs

@tab:active Preview

<video autoplay loop muted playsinline>
  <source src="https://assets.vluv.space/snippet_demo.webm" type="video/webm">
</video>

@tab Snippet

```json markdown.json
{
	"animated_image": {
		"prefix": "video",
		"body": [
			"<video autoplay loop muted playsinline>",
			"  <source src=\"$1\" type=\"video/webm\">",
			"</video>"
		]
	},
	"Accordion": {
		"prefix": ["x-accordion", "accordion"],
		"body": [
			"<x-accordion>",
			"  <accordion-item title=\"$1\">",
			"    $2",
			"  </accordion-item>",
			"</x-accordion>"
		],
		"description": "Accordion custom element with expandable items"
	}
}
```

:::

## **One Definition, Multiple editors.**

Nowadays, numerous forks of VS Code have emerged, including Cursor, Windsurf and Trae, which makes maintaining code snippets across different editors quite a hassle. Different editors store snippets in their own default directories as shown below:

| Editor                   | Snippets Folder                      |
| ------------------------ | ------------------------------------ |
| VSCode/Cursor/Trae       | `<UserDataFolder>/User/snippets`[^1] |
| NeoVim using `blink.cmp` | `~/.config/nvim/snippet` [^2]        |

Here’s my approach to unified snippet maintenance (you can refer to my [[dotbot|article]] on dotbot for the full details): I store all snippet files centrally in `<dotfiles_folder>/path/to/snippets` directory, then create **symbolic links** for each editor that point to this directory:

```nu
$ ls ~/.config/nvim `~/Library/Application Support/Code/User/` --long | where type == symlink | select name target

╭───┬───────────────────────────────────────────────────────────────────┬──────────────────────────────────────────────────────────────────╮
│ # │                               name                                │                              target                              │
├───┼───────────────────────────────────────────────────────────────────┼──────────────────────────────────────────────────────────────────┤
│ 0 │ /Users/gjx/.config/nvim/snippets                                  │ /Users/gjx/Projects/dotfiles/application/vscode/snippets         │
│ 1 │ /Users/gjx/Library/Application Support/Code/User/keybindings.json │ /Users/gjx/Projects/dotfiles/application/vscode/keybindings.json │
│ 2 │ /Users/gjx/Library/Application Support/Code/User/settings.json    │ /Users/gjx/Projects/dotfiles/application/vscode/settings.json    │
│ 3 │ /Users/gjx/Library/Application Support/Code/User/snippets         │ /Users/gjx/Projects/dotfiles/application/vscode/snippets         │
╰───┴───────────────────────────────────────────────────────────────────┴──────────────────────────────────────────────────────────────────╯
```

This way, I only need to maintain a single copy of snippets for all editors without redundant work.

## Read Also

- For a more detailed syntax explanation, refer to the [official documentation](https://code.visualstudio.com/docs/editing/userdefinedsnippets#_snippet-syntax).
- For my snippet collections, refer to [Efterklang/dotfiles](https://github.com/Efterklang/dotfiles/tree/main/application/vscode/snippets).

[^1]: The  _user data folder_'s location is dependent on the platform: `%APPDATA%/Code` for windows, `~/.config/Code` for Linux and `~/Library/Application Support/Code` for macOS
[^2]: Blink uses the `vim.snippet` API by default for expanding and navigating snippets. The built-in `snippets` source will load [friendly-snippets](https://github.com/rafamadriz/friendly-snippets), if available, and load any snippets found at `~/.config/nvim/snippets/`.[Snippets | Blink Completion (blink.cmp)](https://cmp.saghen.dev/configuration/snippets)