I’ve found that over the years of writing code or just entering notes down that we often produce text that can be partially reproduced. Often I would create reference files for code snippets or formatted text that I could go and grab to reuse when needed. I’m sure most of us would agree that this is not effective and accessible as having access to the snippets right within the editor. When using VSCodium a free open source software fork of VSCode, there is a built-in system that can help manage snippets and take them to a whole new level with tabstops, placeholders, choices (value picker), and variables. Join me in exploring this wonderful feature.
What are Snippets?
Re-usable text pattern or source code that aids in avoiding repetitive typing and recreating the text that has already been done in the past. Typically, snippets are used in programming or specifically formatted text.
There are two types of code snippets, built-in and user-defined. Built-in snippets are provided by the editor itself or from installing extensions. The user-defined snippets are created by you the user. All snippets are written in JSON (JavaScript Object Notation) and have support for C-style comments. Such use cases can be Jekyll code blocks, loops, or Jekyll admonitions.
Snippet Properties
Each code snippet is defined with the following properties.
- name (required)
- Snippet name that is displayed at the time of code completion if no description is defined.
- scope (optional)
- Defines the context in which the code snippet is available by using one or more language identifiers. This helps code completion list only relevant suggestions. If scope property is omitted, then the snippet will be available in all languages.
- prefix (required)
- One or more trigger words that will cause the snippet to be listed as an option at the time of code completion.
- body (required)
- One or more lines of content that will be added to the desired location from which it was called. Newlines, tabs, etc. will be formatted based upon the context in which the snippet is inserted.
- description (optional)
- A descriptive text of the code snippet that will be displayed at the time of code completion.
- isFileTemplate (optional)
- To control whether the code snippet can be used to populate or replace a file’s contents when running “Snippets: Populate File from Snippet” via the Command Palette for a new or existing file. The property has a value of either true or false.
Using Snippets
Accessing the list of user-defined, and built-in snippets can be done using one of the below methods.
- Code Completion (IntelliSense)
- Type the snippet keyword (prefix) followed by pressing, CTRL+Spacebar and then select a snippet by pressing enter.
- Command Palette
- Use command “Snippets: Insert Snippet” or “Snippets: Populate File from Snippet” by pressing CTRL+Shift+P and then select a snippet by pressing enter.
- Tab Completion
- This method is supported, but must be enabled within the settings (CTRL+,) under User > Text Editors (
"editor.tabCompletion": "on"). Then simply type the snippet keyword (prefix), and press the tab key and then select a snippet by pressing enter.
Creating Snippets
Use the following steps to create either a language, project or global scope snippet.
- Open the Command Palette, press CTRL+Shift+P.
- Run the command “Snippets: Configure User Snippets”.
- Selected the desired option under “New Snippets”.
- Options displayed as a language will only be applied to a specific language
- Options displayed as “New Snippets file for” will only be applied to a specific project
- Options displayed as “New Global Snippets file” will be applied to all languages
Note
Snippets are stored with the file extension of "json" or "code-snippets" (global/projects).
Editing Snippets
- Open the Command Palette, press CTRL+Shift+P.
- Run the command “Snippets: Configure User Snippets”.
- Selected the desired snippet to modify.
Removing Snippets
Danger
This process is permanent and cannot be undone.
- Open the Explorer Workspace (CTRL+Shift+E).
- Browse and select the desired code snippet by left mouse clicking on the file.
- Press the del key or right mouse click on the file and left click on “Delete”.
Deleting a snippet can be done manually by browsing to one of the following applicable directories using a file manager or terminal to remove the desired file.
- /home/{username-here}/.config/VSCodium/User/snippets
- .vscode (located within each project folder)
- C:\Users\{username-here}\AppData\Roaming\VSCodium\User\snippets
Example Snippets
This example illustrations language specific snippets for YAML (yaml.json). Multiple snippets are stored together.
The first snippet is a changelog that is stored within the Jekyll front matter for a post. This snippet is triggered by
the keyword (prefix) “adlog” (Adamsdesk post changelog). The second example is another Jekyll front matter for a
wallpaper post that is triggered by adwal (Adamsdesk wallpaper item).
The variable $CURRENT_YEAR will be replaced with the current four digit year, $CURRENT_MONTH two-digit month and
$CURRENT_DATE two digit day of the month. The numbered variables control the order of cursor placement after being
inserted. Enter the desired value at each cursor positing and jump to the next position by pressing the tab
key. The last cursor position is defined by the variable $0. The \t represents a tab character.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//This is comment for the snippets stored in the yaml.json file.
{
"Adamsdesk Changelog": {
"prefix": "adlog",
"body": [
"changelog:",
"\t- date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
"\t\tlog:",
"\t\t\t- $0"
],
"description": "Adamsdesk YAML frontmatter changelog."
},
"Adamsdesk Wallpaper Item": {
"prefix": "adwal",
"body": [
"\t- caption: $1",
"\t\tlink: $2",
"\t\tsource: $3",
"\t\timage: $4",
"\t\talt: $5",
"$0"
],
"description": "Adamsdesk YAML wallpapers array item."
}
}
Dive Deeper
For further details on snippet scope, special constructs, remove built-in snippets from IntelliSense, and more refer to the knowledge base article.
