How to Use snippet-generator.app to Create a VS Code Snippet

Updated

snippet-generator.app is a browser-based tool that turns a block of code into a ready-to-paste snippet definition for Visual Studio Code, Sublime Text, or Atom. To use it for VS Code: open the site, select Visual Studio Code as the target editor, paste your code into the content area, fill in the prefix (the trigger word) and description, then copy the generated JSON into a VS Code snippet file. This works for any snippet you want to reuse, and you don't need to install anything — but you do need to know where VS Code stores snippet files, which the site itself doesn't handle for you.

What the tool actually does

A VS Code snippet is a JSON entry with a name, a prefix (what you type to trigger it), a body (the code, as an array of lines), and an optional description. Writing that by hand means escaping quotes, converting every line into a quoted array element, and inserting $1, $2 placeholders manually — tedious and error-prone.

snippet-generator.app automates that conversion. You give it plain code; it gives back the correctly escaped JSON structure. The site's own description confirms its scope: "Snippet generator for Visual Studio Code, Sublime Text and Atom."

Step-by-step: generating a VS Code snippet

  1. Open snippet-generator.app in your browser. No account or install is required to reach the generator.
  2. Select the target editor. Choose Visual Studio Code from the editor options. This matters because the output format differs between VS Code, Sublime Text, and Atom — picking the wrong one gives you JSON that won't work in VS Code.
  3. Enter the snippet content. Paste or type the code you want to reuse into the content field. For example, a React functional component skeleton or a Python logging setup.
  4. Set the prefix. This is the trigger text you'll type in the editor to insert the snippet — for example log or rfc. Choose something short and unlikely to collide with normal typing.
  5. Add a description. Optional but useful; it shows up in VS Code's IntelliSense suggestion list so you can tell similar snippets apart.
  6. Generate the snippet. The tool produces the formatted JSON.
  7. Copy the output. Use the copy button or select and copy the generated JSON.

At this point you have valid snippet JSON. The remaining work happens inside VS Code.

Installing the snippet in VS Code

  1. In VS Code, open the Command Palette (Ctrl+Shift+P on Windows/Linux, Cmd+Shift+P on macOS).
  2. Run Preferences: Configure User Snippets.
  3. Choose either a global snippet file (applies to all projects) or a language-specific file like javascript.json (applies only to that language).
  4. Paste the generated JSON inside the outer braces of the file. VS Code snippet files are a JSON object where each key is the snippet name.
  5. Save the file.

Expected result: typing your prefix in a matching file shows the snippet in the autocomplete dropdown with your description; selecting it inserts the code.

Common snags

  • Nothing appears when you type the prefix. The snippet is probably in the wrong scope — a language-specific file only triggers in that language. Check the file you pasted into.
  • JSON errors. VS Code snippet files must be valid JSON. If you paste a snippet and the file shows a red squiggle, you likely pasted it outside the outer { } or left a trailing comma.
  • Placeholders don't behave as expected. If you want tab stops, add $1, $2, etc. in the content before generating, or edit the body afterward. The generator escapes what you give it; it doesn't invent placeholders.
  • Prefix collides with real code. A prefix like if or for will fight with normal typing. Use something distinctive.

When this tool is the right choice

Use snippet-generator.app when you have an existing block of code and want it as a snippet without hand-escaping. Skip it if you're building a snippet full of tab stops and choice placeholders from scratch — in that case writing the JSON directly, or using a VS Code extension that manages snippets, gives you more control over placeholder syntax.