User Snippets with VSCode

userSnippets.md

User Snippets

• Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements.

How to access user snippets

Cogwheel -> User Snippets
Windows: Ctrl + Shift + P
Mac: Ctrl/Cmd + Shift + P

Multiple Languages

You can define snippets for each language like JavaScript, CSS, Go and more

Basic Usage

Prefix

The shortcut name you want to set to trigger the snippet.

Note: You can use multiple names here

Body

Tabstops

Syntax: $1, $2

Make the editor cursor move inside a snippet.
Each tab key press will move the cursor to the next position

Placeholders

Syntax: ${1:default}

Same as tabstops but with a default value

Nesting

Syntax: ${1:another ${2:placeholder}}

These can all be nested together

Dropdown List

Syntax: ${1|one,two,three|}

Placeholders can have choices in a dropdown list as values.

Variables

Syntax: ${WORKSPACE_NAME:default}

You can insert some predefined variable names

Advanced Usage

Variables / Placeholder Transformations

It is possible to transform values using regex

Example: Uppercase all characters

Description

Set a description for the custom snippet

References

• https://code.visualstudio.com/docs/editor/userdefinedsnippets