BACKGROUND

VSCode snippets are a productivity feature allowing blocks of code to be inserted with a couple of keystrokes or tab completion. Its simple to add your own Snippets and dramatically boost your productivity. Read on for the details.

All paths and keyboard shortcuts in this article assume VSCode is running on Windows

Predefined Snippets are included with most of the VSCode language extensions (use @category:“snippets” in the extensions pane to see which ones). However, they may not match your coding style, or have trigger text that suits you. User-defined snippets allow complete customisation. They also support variables that are replaced with required values on insert, making them perfect for boilerplate code.

EDITING USER-DEFINED SNIPPETS

Open a language-specific Snippet file as follows (example using PowerShell):

File > Preferences > User Snippets > PowerShell

A .json file is displayed, empty at first.

A Snippet is made up of the following elements

ElementExampleDescription
name“Function template”The name is shown by Intellisense if there is no description
prefix[“ft”,“function”]One or more trigger words that activate intellisense (uses substring matching)
body[“function Verb-Noun {\r”,"[cmdletbinding()]\r"]The template code to be inserted
descriptionAdvanced function boilerplateOptional description displayed by intellisense
placeholder${1:Verb-Noun}An element within the body that is replaced by the user after insertion. The number represents the tab stop position. The text is the default value that is replaced
choices${1|one,two,three|}This placeholder will prompt to choose one of the options between the pipe characters
$0[“while($i -lt 10){\r”,"\t$0\r","}"]A special placeholder that always comes last and ends insertion mode

Snippet example

"Advanced function": {
 "prefix": ["fa","function"]
	"body": [
		"Function ${1:Verb-Noun}{\r",
		"[cmdletBinding()]\r",
		"param(\r",
		"    \r",
		")\r",
		"BEGIN{\r",
		"\r",
		"}\r",
		"\r",
		"PROCESS{\r",
		"$0\r",
		"}\r",
		"\r",
		"END{\r",
		"\r",
		"}\r",
		"\r",
		"}"
 ],
	"description": "Advanced function boilerplate"

Note the use of a JSON array for the body and control characters for new lines. This is quite laborious to create by hand, but VSCode extensions can make this much easier…

Marketplace Snippet Extension

There are a number of extensions in the VSCode marketplace that will create a Snippet from highlighted code in the editor.

For example, Snippet Creator will automatically detetect the in-use language and then prompt for the Snippet prefix and description. You can then edit the Snippet to fine-tune it.

Snippet Scope

Language-specific

Most Snippets will be created in a language-specific Snippet file and will only prompt for insertion when using that language e.g.
        %APPDATA%\Code\User\snippetsPowershell.json

Global

There is also a global Snippets file that applies to all languages. This file does not exist by default but can be created from File > Preferences > User Snippets > New Global Snippets file. The file can have any name, but always ends in .code-snippets. For example:
        %APPDATA%\Code\User\snippets\GlobalSnippets.code-snippets

The global Snippets can use an additional property called Scope to limit them to a list of languages. If it isn’t specified, they are available to all.

Project-specific

If a global Snippets file is placed in the .vscode folder at the root of a project, it is scoped only to that project. It can still use the scope property to further limit Snippets to specific languages.

Keyboard Shortcut

Use File > Preferences > Keyboard Shortcuts > Open Keyboard Shortcuts (JSON) to assign a shortcut to a Snippet. Custom shortcuts are saved in the file %AppData%\Code\User\keybindings.json

If the Snippet is not in the Global Snippets file, the langId is used to specify a language specific Snippet:

Keybinding example

{
  "key": "cmd+k 1",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "langId": "csharp",
    "name": "NewClass"
  }
}

Hiding Snippets

Hiding Snippets is useful when there is a lot of noise in the Intellisense prompts. This can occur when you create a user snippet with the same trigger as a language extension snippet.

  • Open the insert Snippet dialog using CTRL + ALT + J
  • Start typing the tigger characters to show the Snippet options in the list
  • Hover over each item and click the Hide from Intellisense option on the right hand side

Extension Snippets

I don’t recommend trying to edit or remove extension Snippets. Changes are likely to get overwritten when the extension updates.

For information, extension Snippets are stored under %USERPROFILE%\.vscode\extensions. For example the Microsoft PowerShell extension Snippets are at:

%USERPROFILE%\.vscode\extensions\ms-vscode.powershell-2021.2.2\snippets\PowerShell.json



This article was originally posted on Write-Verbose.com