The ultimate guide to VS Code snippets (all ways gathered)

Ever wrote the same lines of code over and over again? Be it loops, function definitions, or classes? 

Well, if you have, you would know how much of a drag and time-wasting it can be. Fortunately, this can be solved through the use of code snippets. 

In this article, we’ll explore what code snippets are, how to create and add them in VS Code, and how Pieces makes managing and sharing your snippets super easy.

Summary of code snippets

Code snippets are pieces of templates that can be inserted in a document by a command or a trigger text. With snippets, you can quickly insert chunks of reusable code into your codebase, eliminating the need to manually type out common code patterns repeatedly.

If the benefits aren't yet clear, here are a few specific reasons code snippets can be helpful to your development workflow:

• You can quickly insert large blocks of code, eliminating the need to manually type out the code repeatedly. With snippets, you save yourself from unnecessary amounts of keystrokes and don't have to spend time on writing boilerplate code.

• We're all human, and we all make mistakes. When you type the same lines of code repeatedly, you're bound to make a mistake at least once at some point in time. Snippets provides a method to output pieces of code with 100% consistency.

• Typing the same lines of code can make your software development workflow feel dull and mundane. Using code snippets helps to eliminate repetitive tasks, freeing up your mental resources to focus on writing enjoyable code that actually interests you.

Classification of snippets

When people talk of snippets in general, they usually mean one of two types:

1. Static snippets: These live as plain text and are inserted exactly as written. They can't be interpolated or transformed.

2. Dynamic snippets: They're written in specific configuration formats like JSON or YAML. They support inserting dynamic elements during usage, including tab stops, variables, placeholders, choices, and, in some editors, interpolated shell code (though VS Code doesn't support this).

This distinction is important, as you'll see in the coming section how different tools handle different types of snippets.

How to create code snippets in VS Code

Now that you’re aware of the classification and benefits code snippets provide to developers, let’s take a look at how you can create and use VS Code user snippets.

Most code editors and IDEs have out-of-the-box support for code snippets, and VS Code is no exception. 

Follow the steps in the tutorial below to get started.

Step 1: Create a snippet file

VS Code snippets are written in JavaScript Object Notation (JSON) files that can define an unlimited number of snippets. 

To create a snippet, start by opening the command palette. 

Depending on your operating system (OS), you can do that using the command Ctrl+Shift+P on Windows or CMD+Shift+P on a Mac. 

Type the word snippet into the search bar and toggle the Preferences: Configure User Snippets option.

This will present you with a drop-down of different languages and selections to choose from:

Step 2: Define your snippet’s scope

Next, you’ll need to define the snippet’s scope, which refers to the languages in which the snippet will be available. 

VS Code supports three types of scopes:

1. Global scope snippets: You can use these code snippets across several or all languages of your choice.

2. Language-specific scope snippets: You can use these code snippets only in a particular language.

3. Project scope (Workspace Snippets): These snippets are specific to a workspace or project folder and are stored within the `.vscode` folder at the root of your project. Under the hood, it creates a global snippets file but scoped to your project.

For this tutorial, you will be creating VS Code Global snippets. 

From the drop-down list, select the New Global Snippets file option and then give the snippet file a name:

With that done, VS Code will create a .code-snippets file prefixed with the name you gave it.

Upon further inspection, you'll notice a few comments and an example snippet, as pictured here:

Step 3: Write the snippet’s syntax

The example snippet of code above is a sample template to show you the format for how to create your own snippet. 

Line by line, here’s an overview of what each field does:

• Print to console: This is the snippet’s name, which will also be displayed via IntelliSense if no description is provided. It is the property of the JSON object that will contain the actual details of the snippet.

• Scope: This determines the languages allowed to use the snippet. You can specify as many languages as you wish, separated by commas. If the scope is omitted, the snippet can be accessed from any language. In this example, the snippet is scoped to only JavaScript and TypeScript.

• Prefix: This defines one or more words you need to type for the snippet to appear. In the example, you need to type “log” to display the snippet.

• Body: This is where you define the code snippet. It can be a string if it is a single line of code or an array of strings if it has multiple lines, where each string forms a new line in the snippet. In this example, the actual code is console.log.

• $1 and $2: These are called tab stops. They enable you to pinpoint where the cursor should be placed within the code snippet after being injected and also allow you to tab through the code easily using the tab key. $1 is simply a placeholder for where the cursor should be initially placed after invoking the snippet, and $2 is the next point the cursor placement should move to after hitting the tab key.

• Description: This describes VS code snippets by allowing you to provide details on what it’s all about. If it is omitted, the name of the snippet will be used instead. In this example, the description tells you that the snippet’s purpose is to “log output to console.”

If you prefer a nice GUI to create your snippets, you can use this free VS Code snippet generator web app. 

Now that you have an example code snippet saved, let’s take a look at how you can use it in your workflow.

Using VS Code snippets in your workflows

There are mainly two ways you can use this snippet in your actual development workflow. 

Here’s a quick overview of them.

VS Code IntelliSense

VS Code IntelliSense is the easiest way to insert code snippets. It automatically aids you by providing snippet suggestions based on the current language (because of scope) and inserted text, among several other features. 

To use VS Code IntelliSense, start by typing the prefix for the snippet. This will display a list of suggestions with hints at what you might be trying to achieve (Ctrl+Space also triggers IntelliSense).

You can then select the code snippet by hitting the Tab or Enter key to automatically insert it into your code:

As you can see, the cursor is immediately placed where the $1 placeholder was in the snippet’s file.

If, for some reason, your code snippet isn't working (you aren't getting auto-complete suggestions), try restarting your VS Code instance.

Snippet Picker

Another method to insert snippets in your code is with VS Code’s dedicated snippet picker. Open the command palette and type insert into the search bar.

Then select the Insert Snippet option.

This displays a drop-down list of all the custom VS Code snippets you have created:

From here, you can select the appropriate snippet, and it will be inserted into your code.

The snippet picker comes in real handy when you don't want suggestions from IntelliSense on a particular snippet, but still want to be able to insert at will. 

This is easily achieved by not setting a prefix on the snippet.

How I use snippets

Personally, I’m a total snippet maniac. I'll do anything to avoid retyping the same boilerplate code over and over again.

From spinning up a quick for-loop to scaffolding an entire file with mock data, it's really great. Here are two of my all-time favorites that I've used over the years.

Numero uno

```json
{
  "React Functional Component with prop types": {
	"prefix": "rafcet",
	"body": [
  	"type $1Props = {",
  	"}",
  	"",
  	"const $1: React.FC<$1Props> = () => {",
  	"  return (",
  	"	<div>$1</div>",
  	"  )",
  	"}",
  	"",
  	"export default $1;"
	],
	"description": "Create a React functional component with props types"
  }
}
```

This is a simple snippet to create a React functional component with a props type (like the description says). It uses multiple tab stops at different points.

By reusing the same tab stop ($1) in every spot, VS Code drops in multiple cursors so I can name my component once and watch it propagate everywhere. 

Use this snippet as soon as I create a new component file, and honestly, I can’t recommend it enough.

It’s literally saved me countless hours.

Numero dos

```json
{
  "YAML Front Matter": {
	"prefix": "yfm",
	"body": [
  	"---",
  	"title: \"${1:Your Page Title}\"",
  	"date: \"${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}\"",
  	"uuid: \"${2:${UUID}}\"",
  	"slug: \"${3:${1/\\s+/-/g}}\"",
  	"draft: ${4|false,true|}",
  	"tags:",
  	"  - ${5:tag1}",
  	"categories:",
  	"  - ${6:category1}",
  	"---",
  	"",
  	"$0"
	],
	"description": "Insert YAML front-matter"
  }
}
```

I write a lot of blog posts (like the one you're reading now!) and I usually write them in markdown format right in my editor. Call me old-fashioned, but I prefer the speed gain of my shortcuts and snippets over the niceties of any modern CMS.

Anyways, to quickly write a front matter, I created a snippet that:

• Injects today’s date automatically.

• Generates a UUID placeholder.

• Slugifies my title on the fly.

• Toggles draft status and lists my tags/categories in one go.

It's a tad bit more complex than the previous React snippet, but not by that much. Under the hood, it uses mostly tab stops, including placeholders, variables,  and a transformation to slugify the title.

A smoother way to save snippets

So far, all we've covered is dynamic snippets and how they're managed and used in VS Code. 

What we haven't really addressed is static snippets (plain-text templates you can’t parameterize).

Now, to be fair, you can store your static snippets in VS Code if you're a masochist, but you'd be losing a lot of features by doing such as one-click sharing and metadata enrichment.

That's where Pieces Drive comes in. 

Pieces Drive is an all-in-one workspace for saving, managing, and quickly accessing code snippets and other development materials such as notes, logs, and more. 

This means Pieces Drive isn't only constrained to code snippets.

So what are the pain points Pieces solves that VS Code doesn't? 

Well, just to state a few:

• Automatic formatting, tagging, annotations, link suggestions, and other metadata enrichment for every snippet

• Collation of snippets from multiple sources (think GitHub Gists, Stack Overflow, articles)

• Instant shareable links for public access (you can’t share VS Code snippets)

• Search all your saved materials right inside VS Code

These features don't really make much sense to dynamic snippets, but do to static snippets. Let me walk you through a simple workflow of saving a snippet, inserting it, and sharing it with others.

Saving a snippet

The following section makes use of Pieces' VS Code extension.

I have a PDF integrity check function I use across multiple apps frequently. I'm sure there's an npm library for it, but I really want to add an extra third-party dependency.

Instead, I can save this as a snippet in Pieces Drive by right-clicking for the context menu, and choosing Save Active File to Pieces.

And that's it!

No fiddling with VS Code .code-snippets files.

My PDF checker lives in Pieces Drive, fully formatted, tagged by language and project, and ready to be publicly shared.

Inserting a saved snippet

To access it, I can hit ⌘+Shift+P (or Ctrl+Shift+P) for Command Palette, type “Pieces: Search Pieces” and filter by name, tag, or a suggested query — just like you would for VS Code’s dynamic snippets.

Sharing a saved snippet

Want to share the snippet with a teammate (or rather the public)? I can do so by opening the Pieces Drive icon in the sidebar, right-clicking the snippet, and choosing “Generate Shareable Link”.

A button will be presented shortly to copy the generated link to my clipboard.

On the other end, this is what my supposed teammate would see when they visit the link:

If you notice, there's a concise title and description for the snippet, and on the bottom right, you'll find extra info like annotations and related links telling you more about the snippet. 

This is all achieved by Pieces enrichment feature.

But that's not all... there's more!

Did you know that you can use all your snippets stored inside your Pieces Drive as context for Pieces Copilot? 

Yeah, all you have to do is click the + icon under the Piece Copilot Chat tab and choose "Add snippets". This will present you with all the snippets you have stored, and you can select any one as context for your next prompt.

Wrapping up

Developers tend to carry out a lot of repetitive tasks during the course of development, which can really undermine efficiency when writing code. Using code snippets (whether static or dynamic) lets you focus on the real logic at hand rather than getting caught up in busy work. 

Whether you’re inserting a quick loop or scaffolding an entire component, snippets shave off keystrokes and keep your mind in the flow.

So what are you waiting for? Download Pieces for free today and speed up your development workflow..

This article was originally published by Victor Ikechukwu on May 26, 2022. It was comprehensively rewritten by Emmanuel Isenah on May 5th, 2025 to ensure the information reflects the latest product releases, technological accuracy, and current best practices.