VS Code & Sublime User Snippet Generator

Convert raw code into VS Code, Cursor, and Sublime Text JSON code snippets with tabstops, prefix triggers, and placeholders.

VS Code & Sublime User Snippet Generator

Convert raw code into VS Code, Cursor, and Sublime Text JSON code snippets with tabstops, prefix triggers, and placeholders.

Snippet Title:

Trigger Prefix:

Language Scope:

Code Body Template:

Generated VS Code JSON Snippet:

{
  "React Arrow Component": {
    "prefix": "rac",
    "body": [
      "interface ${1:Props} {",
      "  title: string;",
      "}",
      "",
      "export const ${2:MyComponent} = ({ title }: ${1:Props}) => {",
      "  return (",
      "    <div>",
      "      <h1>{title}</h1>",
      "      ${0}",
      "    </div>",
      "  );",
      "};"
    ],
    "description": "React Arrow Component",
    "scope": "typescriptreact,javascriptreact"
  }
}

About This Tool

The VS Code & Sublime User Snippet Generator converts multi-line code into properly escaped JSON snippet definitions with custom trigger prefixes, description metadata, and `$1`, `$2` tabstop variables.

Key Features

Generates VS Code `.code-snippets` format with prefix, body array, and description

Escapes double quotes, backslashes, and special characters

Supports multiple language scopes (TypeScript, JavaScript, Python, Go, HTML, CSS)

Instant copy for `snippets/` editor settings

How to Use This Tool

Enter Snippet Title (e.g. `React Arrow Component`).
Enter Snippet Prefix Trigger (e.g. `rac`).
Paste your multi-line code template.
Copy the generated JSON snippet directly into your VS Code User Snippets.

Why Use This Tool

Save hours writing boilerplate code with personalized keyboard shortcuts.
Share standardized team snippets across your workspace.

Pro Tips

Use `${1:defaultName}` to add default placeholder text that can be quickly replaced with the Tab key.

Frequently Asked Questions

Where do I paste the generated snippet in VS Code?

Open VS Code, press `Ctrl+Shift+P` (or `Cmd+Shift+P`), type 'Configure User Snippets', select your target language or 'New Global Snippets file', and paste the JSON object.

How do tabstops work in VS Code snippets?

`$1`, `$2`, etc. represent tab stop positions. Pressing `Tab` cycles through them in order, while `$0` defines the final cursor position.

VS Code & Sublime User Snippet Generator