VSCodium Code Snippets¶
Code snippets are 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.
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 wether 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.
Snippet Scope¶
Code completion only lists relevant snippets based upon the scope defined by language(s) or project(s) and can be accessed by using the Command Palette via "Snippets: Configure User Snippets".
- Single-language
- User-defined snippets are stored in a dedicated language's snippet file (e.g. javascript.json, yaml.json).
- Multi-language and Global
- User-defined snippets are stored and defined as a "global" snippet file that have the file extension of ".code-snippets" (e.g. jekyll-code-block.code-snippets). A snippet can define one or more language identifiers using the scope property, and therefore it is only accessible when using the defined languages. When there is no scope property defined, then it is considered a global snippet to be available in all languages.
- Project
- Each project can have it's own snippets either globally or language specific.
Snippet Constructs¶
To control the cursor and text being inserted special constructs list below, can be used within the body
property of a code snippet.
- Tabstops
- Each tabstop represents where the editor is to place the cursor each time the tab key is pressed. Each tabestop is prefixed with a dollar sign followed by a number (e.g.
$1
,$2
). The number represents the order the cursor moves. The last cursor position is defined by$0
. Using multiple tabstops with the same order number will be linked and updated in sync. - Placeholders
- Provides a tabstop with a placeholder value (e.g.
${5:array}
). The placeholder text will be inserted and selected to allow for quick replacement. Placeholders are allowed to be nested,${1:another ${2:placeholder}}
. - Choice
- A tabstop with a list of predefined choices of values. Once such a snippet is inserted choices will prompt the user to make a select out of a list. Syntax is prefixed with a
|
(pipe character), then a comman delimited values followed by the suffix of a|
(pipe character) (e.g.${1|liquid,php,rust|}
). - Variables
- A way to insert a value (e.g.
$name
,${name:default
). When a variable isn't set, it will use the default or an empty string is inserted. If the variable is unknown (undefined) the name of the variable is inserted and is transformed into a placeholder.
Here is a list of variables that can be used to insert values:
TM_SELECTED_TEXT
The currently selected text or the empty stringTM_CURRENT_LINE
The contents of the current lineTM_CURRENT_WORD
The contents of the word under cursor or the empty stringTM_LINE_INDEX
The zero-index based line numberTM_LINE_NUMBER
The one-index based line numberTM_FILENAME
The filename of the current documentTM_FILENAME_BASE
The filename of the current document without its extensionsTM_DIRECTORY
The directory of the current documentTM_FILEPATH
The full file path of the current documentRELATIVE_FILEPATH
The relative (to the opened workspace or folder) file path of the current documentCLIPBOARD
The contents of your clipboardWORKSPACE_NAME
The name of the opened workspace or folderWORKSPACE_FOLDER
The path of the opened workspace or folderCURSOR_INDEX
The zero-index based cursor numberCURSOR_NUMBER
The one-index based cursor number
Date and time:
CURRENT_YEAR
The current yearCURRENT_YEAR_SHORT
The current year's last two digitsCURRENT_MONTH
The month as two digits (example '02')CURRENT_MONTH_NAME
The full name of the month (example 'July')CURRENT_MONTH_NAME_SHORT
The short name of the month (example 'Jul')CURRENT_DATE
The day of the month as two digits (example '08')CURRENT_DAY_NAME
The name of day (example 'Monday')CURRENT_DAY_NAME_SHORT
The short name of the day (example 'Mon')CURRENT_HOUR
The current hour in 24-hour clock formatCURRENT_MINUTE
The current minute as two digitsCURRENT_SECOND
The current second as two digitsCURRENT_SECONDS_UNIX
The number of seconds since the Unix epoch
Random values:
RANDOM
6 random Base-10 digitsRANDOM_HEX
6 random Base-16 digitsUUID
A Version 4 UUID
Line or block comments using the current language:
BLOCK_COMMENT_START
Example output: in PHP /* or in HTML <!--BLOCK_COMMENT_END
Example output: in PHP */ or in HTML →LINE_COMMENT
Example output: in C-style/PHP //
How to Remove Built-in Snippets from IntelliSense¶
These steps will hide or remove specific built-in snippets from being displayed when using IntelliSense (code completion).
- Open the Command Palette, press CTRL+Shift+P.
- Run the command "Snippets: Insert Snippet".
- Click on the eye icon located on the far right hand side of each snippet to toggle visibility.
Note
Hidden snippets are still visible when using the command "Snippets: Insert Snippet" via the Command Palette.
Language Identifiers¶
The following list is the default language identifiers. The scope
property can have one or more languages listed using the identifier (case sensitive) as the value.
Language | Identifier |
---|---|
ABAP | abap |
Windows Bat | bat |
BibTeX | bibtex |
Clojure | clojure |
Coffeescript | coffeescript |
C | c |
C++ | cpp |
C# | csharp |
CUDA C++ | cuda-cpp |
CSS | css |
Diff | diff |
Dockerfile | dockerfile |
F# | fsharp |
Git | git-commit and git-rebase |
Go | go |
Groovy | groovy |
Handlebars | handlebars |
Haml | haml |
HTML | html |
Ini | ini |
Java | java |
JavaScript | javascript |
JavaScript JSX | javascriptreact |
JSON | json |
JSON with Comments | jsonc |
LaTeX | latex |
Less | less |
Lua | lua |
Makefile | makefile |
Markdown | markdown |
Objective-C | objective-c |
Objective-C++ | objective-cpp |
Perl | perl and perl6 |
PHP | php |
Plain Text | plaintext |
PowerShell | powershell |
Pug | jade, pug |
Python | python |
R | r |
Razor (cshtml) | razor |
Ruby | ruby |
Rust | rust |
SCSS | scss (syntax using curly brackets), sass (indented syntax) |
ShaderLab | shaderlab |
Shell Script (Bash) | shellscript |
Slim | slim |
SQL | sql |
Stylus | stylus |
Swift | swift |
TypeScript | typescript |
TypeScript JSX | typescriptreact |
TeX | tex |
Visual Basic | vb |
Vue | vue |
Vue HTML | vue-html |
XML | xml |
XSL | xsl |
YAML | yaml |
Notable Directories¶
Type | VSCodium | VSCode | System |
---|---|---|---|
Extensions | ~/.vscode-oss/extensions | ~/.vscode\extensions | Linux |
Extensions | C:\Users{UserName}.vscode-oss/extensions | C:\Users\ | Windows |
Snippets Project | {ProjectDirectory}/.vscode/ | {ProjectDirectory}/.vscode/ | All |
Snippets User-defined | ~/.config/VSCodium/User/snippets | ~/.config/Visual Studio Code/User/snippets | Linux |
Snippets User-defined | C:\Users{UserName}\AppData\Roaming\VSCodium\User\snippets | C:\Users{UserName}\AppData\Roaming\Code\User\snippets | Windows |