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

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

Why Use ToolSnippet VS Code & Sublime User Snippet Generator?

Save hours writing boilerplate code with personalized keyboard shortcuts.

Share standardized team snippets across your workspace.

Tips for Best Results

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.

Related Tools

All Developer & DevOps Utilities →

VS Code & Sublime User Snippet Generator