How to create and manage code snippets in VS Code

Short answer: VS Code has snippets built in: run Snippets: Configure Snippets, pick a language or a project file, and write each snippet as JSON with a prefix and a body. For a faster loop, select code and save it as a snippet in a few seconds with DevSnip Pro's Create Snippet, and use its ds- snippets for Spring Boot, ASP.NET Core, FastAPI, React, Next.js, Flutter and SwiftUI.

A good snippet saves more than keystrokes. It captures the version of a pattern you've already debugged: the error handler with the right status codes, the test with the right setup, the fetch wrapper that checks response.ok.

Where VS Code keeps snippets

Open any of them with Snippets: Configure Snippets (in older versions, Preferences: Configure User Snippets) from the Command Palette, Ctrl/Cmd+Shift+P.

Write a snippet by hand

A snippet is a named entry with the text you type (prefix), the lines it inserts (body) and an optional description shown in IntelliSense:

{
  "Express route handler": {
    "prefix": "exroute",
    "scope": "javascript,typescript",
    "body": [
      "router.${1|get,post,put,delete|}('/${2:path}', async (req, res, next) => {",
      "  try {",
      "    $0",
      "  } catch (err) {",
      "    next(err);",
      "  }",
      "});"
    ],
    "description": "Async Express route that passes errors to next()"
  }
}

The syntax that makes snippets useful:

• $1, $2 … are tab stops: Tab moves between them, and $0 is where the cursor ends.
• ${1:path} is a placeholder with default text you can type over.
• ${1|get,post,put,delete|} is a choice: a drop-down of values.
• Variables such as $TM_FILENAME_BASE, $CURRENT_YEAR and $CLIPBOARD insert context. ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} turns user-card into UserCard.
• scope (in .code-snippets files) limits a snippet to some languages.

Inside body, escape a literal $ as \\$, and } inside a placeholder as \\}.

Save a snippet from selected code

Writing JSON by hand, with its escaped quotes, is the slow part. With DevSnip Pro:

1. Select the code you want to reuse.
2. Run DevSnip Pro: Create Snippet.
3. Enter the prefix you'll type, a name and an optional description.
4. Reload the window when prompted. VS Code loads contributed snippets at startup.

The snippet then appears in IntelliSense in that language (39 are supported). If the prefix is already used by another of your snippets, you're asked first, so you don't end up with two that pop up together. DevSnip Pro: Saved Snippets lists everything you've saved and deletes what you no longer use.

Use ready-made framework snippets

Type ds- in a supported file, or run DevSnip Pro: Framework Snippets to choose from a list. There are 56, and each one was expanded by VS Code and then compiled (and run, where the framework allows it), so they work as inserted:

• Spring Boot: ds-rest-controller, ds-service, ds-entity, ds-repository, ds-controller-advice, ds-webmvctest, ds-junit
• ASP.NET Core: ds-minimal-api, ds-api-controller, ds-exception-handler, ds-dbcontext, ds-xunit, ds-webapp-test
• Python: ds-fastapi-app, ds-fastapi-router, ds-pydantic, ds-flask-route, ds-django-view, ds-pytest, ds-pytest-fixture
• React and Next.js: ds-rfc, ds-hook, ds-context, ds-next-page, ds-next-route, ds-server-action, ds-rtl
• TypeScript and Node.js: ds-express-router, ds-express-error, ds-zod, ds-fetch-json, ds-vitest
• Flutter and SwiftUI: ds-stless, ds-stful, ds-future-builder, ds-swiftui-view, ds-view-model

Java, C#, Python and Swift also have a ds-logger snippet. It creates the logger that Insert Debug Log then uses for its debug lines.

Keep a snippet collection useful

• Name prefixes by what they make, not by where they came from: exroute beats snippet3. A shared start (like ds-) groups them in IntelliSense.
• Keep snippets small. A snippet that generates a whole file is hard to adapt; when you need a whole resource, a generator fits better. DevSnip Pro's API Resource Scaffolder creates a validated CRUD API with pagination for Express, NestJS, Next.js, Fastify, Spring Boot, ASP.NET Core or FastAPI.
• Share team snippets through the repository. A .vscode/project.code-snippets file is versioned and reviewed like code, and everyone who opens the project gets it.
• Prune. If you haven't used a snippet in months, delete it so the ones you do use are easier to find.