---
title: Type less with Code Snippets
date: 2026-02-05
tags:
  - VSCode
  - Neovim
  - Workflow
  - Markdown
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."
lang: en
i18n:
  cn: /vscode_snippets
  translation: 2
updated: 2026-06-11 18:20:57
---

<script type="module" src="/js/components/tab.js"></script>

## 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:

<link rel="stylesheet" href="/css/optional/accordion.css">

<div class="accordion">
<details class="accordion-item" name="accordion-vscode_snippets-en-1">
  <summary>Scenario 1: Embedding a WebM Video</summary>

  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>
```

</details>
<details class="accordion-item" name="accordion-vscode_snippets-en-1">
  <summary>Scenario 2: Native Details Accordion</summary>

  This snippet inserts a native `<details name>` accordion. It accepts three placeholders: `$1` for the group name, `$2` for the title, and `$3` for the content.

```html
<link rel="stylesheet" href="/css/optional/accordion.css">

<div class="accordion">
<details class="accordion-item" name="accordion-vscode_snippets-en-example-1">
  <summary>What'you Name?</summary>
    My name is GnixAij.
</details>
</div>
```

</details>
</div>

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.

<x-tabs>

<x-tab title="Preview" active>

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

</x-tab>

<x-tab title="Snippet">

```json markdown.json
{
	"animated_image": {
		"prefix": "video",
		"body": [
			"<video autoplay loop muted playsinline>",
			"  <source src=\"$1\" type=\"video/webm\">",
			"</video>"
		]
	},
	"Accordion": {
		"prefix": ["details-accordion", "accordion"],
		"body": [
			"<link rel=\"stylesheet\" href=\"/css/optional/accordion.css\">",
			"",
			"<div class=\"accordion\">",
			"<details class=\"accordion-item\" name=\"${1:accordion}\">",
			"  <summary>${2:Title}</summary>",
			"",
			"  ${3:Content}",
			"",
			"</details>",
			"</div>"
		],
		"description": "Native details accordion with optional CSS"
	}
}
```

</x-tab>

</x-tabs>

## **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)