Type Less With Code Snippets

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 Ctrl + Shift + P 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:

Let’s start with 2 scenarios:

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

<x-accordion>  <accordion-item title="What'you Name?">    My name is GnixAij.  </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.

{	"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:

Here’s my approach to unified snippet maintenance (you can refer to my 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:

$ 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.
• For my snippet collections, refer to Efterklang/dotfiles.