What are user snippets?

The user snippets option in the Visual Studio Code editor allows us to insert custom code snippets using custom shortcuts.

We can use this to quickly insert any repeating code pattern into our code.

I already wrote about these useful HTML shortcuts and JavaScript shortcuts in Visual Studio Code.

These great shortcuts are built into Visual Studio Code and generate some code provided by the code editor.

However, the user snippets option allows us to create custom shortcuts that will generate our own code - and that’s what we’ll focus on in this post.

Using both the built-in and custom shortcuts, I was able to automate many aspects of my programming, save time, and become more efficient.

How to configure snippets

To create your own snippets:

  1. Open Visual Studio Code.
  2. Go to “File” » “Preferences” » “Configure User Snippets”. Alternatively, use the Ctrl + Shift + P shortcut to open the navigation window. Then type Configure User Snippets.
  3. Select the programming language for which you want to configure the code snippets.
  4. A JSON file will open.
  5. Set code snippets by adding new elements to the JSON file.

For each snippet, we will need to provide:

  • Its name.
  • A prefix: The shortcut. The text that will trigger the option to insert the full code snippet.
  • The body: The full code snippet we would like to insert. Here, we can use variables ($0, $1, $2) to allow quick navigation within the code snippet using the Tab key.
  • A description (optional).

For example, let’s take a look at this PHP snippet:

{
	"PHP tags": {
		"prefix": "php",
		"body": ["<?php $1 ?>"],
		"description": "PHP opening and closing tags"
	}
}

This enables us to add this <?php ?> code by simply typing php inside PHP files and pressing the Enter key.

The position of the cursor will automatically be inside the PHP tags (where $1 is located).

Here’s another example, this time a JavaScript snippet:

{
	"JavaScript for loop": {
		"prefix": "forloop",
		"body": ["for (const ${1:element} of ${2:elements}) {", "\t$0", "}"]
	}
}

Note that here we also include a placeholder text (element and elements) as part of the variables: ${1:element} and ${2:elements}.

We also increase the indentation of the text on the second line of this code snippet by including \t which creates a space (tab).

In this example, typing forloop inside JavaScript files and pressing the Enter key will generate the following code:

for (const element of elements) {

}

The cursor position will first highlight the element text, allowing us to replace that placeholder text with the correct variable name.

Pressing the Tab key again will change the cursor position and highlight the elements text.

Pressing the Tab key once again will place the cursor in its final position between the brackets of the loop.

My code snippets

I mostly use this snippets feature to quickly insert different types of media queries in SCSS files.

Therefore, the following snippets are configured in the Code/User/snippets/scss.json file.

{
	"Media query: min-width X-small": {
		"prefix": "minxs",
		"body": ["@media (min-width: \\$min-xs) {", "\t$1", "}"]
	},

	"Media query: min-width small": {
		"prefix": "minsm",
		"body": ["@media (min-width: \\$min-sm) {", "\t$1", "}"]
	},

	"Media query: min-width medium": {
		"prefix": "minmd",
		"body": ["@media (min-width: \\$min-md) {", "\t$1", "}"]
	},

	"Media query: min-width large": {
		"prefix": "minlg",
		"body": ["@media (min-width: \\$min-lg) {", "\t$1", "}"]
	},

	"Media query: min-width X-large": {
		"prefix": "minxl",
		"body": ["@media (min-width: \\$min-xl) {", "\t$1", "}"]
	},

	"Media query: min-width XX-large": {
		"prefix": "minxxl",
		"body": ["@media (min-width: \\$min-xxl) {", "\t$1", "}"]
	},

	"Media query: max-width X-small": {
		"prefix": "maxxs",
		"body": ["@media (max-width: \\$max-xs) {", "\t$1", "}"]
	},

	"Media query: max-width small": {
		"prefix": "maxsm",
		"body": ["@media (max-width: \\$max-sm) {", "\t$1", "}"]
	},

	"Media query: max-width medium": {
		"prefix": "maxmd",
		"body": ["@media (max-width: \\$max-md) {", "\t$1", "}"]
	},

	"Media query: max-width large": {
		"prefix": "maxlg",
		"body": ["@media (max-width: \\$max-lg) {", "\t$1", "}"]
	},

	"Media query: max-width X-large": {
		"prefix": "maxxl",
		"body": ["@media (max-width: \\$max-xl) {", "\t$1", "}"]
	},

	"Media query: max-width XX-large": {
		"prefix": "maxxxl",
		"body": ["@media (max-width: \\$max-xxl) {", "\t$1", "}"]
	}
}

This way, I can type maxmd inside any SCSS file and press the Enter key to generate this code:

@media (max-width: $max-md) {
	
}

The cursor position will automatically be inside the brackets of the media query (thanks to the $1 variable) so I can start writing the CSS code right away.

References