📝 Dev

VS Code Snippet Generator

Build a JSON snippet ready to paste into VS Code *.code-snippets files, with prefix, multi-line body and tabstops $1, $2.

Snippet name Prefix (trigger) Description Body (uma linha por linha do snippet)

—

VS Code snippets without broken JSON

You type the same block twenty times a day and you know it should be a snippet, but the file format is fiddly enough to put you off: the body has to be an array with one string per line, and a stray comma makes VS Code ignore the entire file without saying a word. Here you write the body as ordinary text, one line per line, and get back JSON with the array already built and escaped.

About tabstops: $1 and $2 are the Tab stops and $0 is where the cursor lands at the end. The example that loads with the page uses $1 twice on purpose, because repeating a number mirrors it, so you type once and both spots fill in together. Use ${1:name} for a default value, ${1|a,b,c|} for a list of choices, and a backslash before a dollar sign you want to keep literal.

Paste the result into .vscode/name.code-snippets to scope it to one project, or open Snippets: Configure Snippets from the command palette to have it everywhere. One field this page does not emit is scope, which limits a snippet to certain languages; without it, a trigger in a .code-snippets file fires in every file type. The Copy button grabs the whole JSON. Nothing leaves your browser.

Frequently asked questions

Can a snippet have more than one trigger?

In VS Code, yes: prefix accepts an array of strings. This page writes a single trigger, so turn that value into an array after pasting if you want two.

Can I use variables like the date or the file name?

You can. Type $TM_FILENAME, $CURRENT_YEAR or $CLIPBOARD straight into the body; they pass through the generator untouched and VS Code resolves them on insert.

My snippet does not show up. What do I check?

Whether the file sits in .vscode with the .code-snippets extension, whether the JSON parses, and whether the language matches. A snippet inside javascript.json only fires in JS files.

Related Tools

⌨️

VS Code Keybinding Generator

Generate entries for VS Code keybindings.json with key, command and when-context. Custom shortcut in seconds.

💎

Sublime Text Snippet Generator

Create a .sublime-snippet XML file with trigger, scope and content. Drop into Packages/User/ in Sublime.

⚙️

VS Code tasks.json Generator

Build a VS Code tasks.json with label, type, command, group and problemMatcher. Includes configurable default shell.

⏭️

Skip Link Snippet

Takes the id of your main content region and returns the anchor plus CSS for a skip link that stays off-screen until it takes focus (WCAG 2.4.1).

🇻

Basic .vimrc Generator

Build a starter .vimrc with colors, line numbers, indentation, search and common shortcuts. A great starting point for newcomers.

🌐

HTML Preview

Write HTML, CSS and JavaScript and see the rendered result in real time. Isolated sandbox — no code is sent to any server.