VS Code Snippets and Emmet Cheat Sheet

Sidebar

Programming · VS Code Snippets and Emmet Cheat Sheet

Writing your own snippets, the snippet syntax, and Emmet's HTML and CSS shortcuts with their settings. Exact name, what it does, and its default. Sheet 12 in the VS Code series.

Snippets: The Basics

Snippets: Configure SnippetsCommand Palette: create or edit snippet files

Insert SnippetCommand Palette: pick a snippet from a list instead of typing its prefix

Language snippetsFiles such as javascript.json: only offered in that language

Global snippets (.code-snippets)Offered in every language, or only those named in scope

Project snippetsA .code-snippets file in the project's .vscode folder

%APPDATA%\Code\User\snippetsWhere your user snippet files live on Windows

Typing the prefixType it, then accept the suggestion with Tab or Enter

Snippet JSON Fields

"Snippet Name": { … }The key is a name shown in lists; the object holds the fields below

prefixWhat you type to trigger it; a string or an array of strings

bodyThe text to insert; an array makes each entry one line

descriptionShown next to the suggestion

scopeLanguage IDs in a global snippet, e.g. javascript,typescript

isFileTemplatetrue: offered when you create a new file

include / excludeGlob patterns limiting the files where the snippet is offered

Tab Stops & Placeholders

$1 $2 $3Tab stops: Tab moves from one to the next

$0The final cursor position

${1:default}A placeholder with default text that you can type over

${1:outer ${2:inner}}Placeholders can be nested

${1|one,two,three|}A choice: pick a value from a list

Same number twiceLinked tab stops: typing in one fills in all of them

\$ \\ \}Escape a literal dollar sign, backslash or closing brace

Variables (a Selection)

$TM_FILENAME / $TM_FILENAME_BASEFile name with / without its extension

$TM_FILEPATH / $TM_DIRECTORYFull path of the file / its folder

$RELATIVE_FILEPATHPath relative to the workspace folder

$TM_SELECTED_TEXTThe text selected when the snippet was used

$TM_CURRENT_LINE / $TM_CURRENT_WORDThe current line / the word at the cursor

$CLIPBOARDThe contents of the clipboard

$WORKSPACE_NAME / $WORKSPACE_FOLDERName / path of the open workspace

$CURRENT_YEAR $CURRENT_MONTH $CURRENT_DATEToday's date parts (also hour, minute, second, day and month names)

$UUID $RANDOM $RANDOM_HEXA unique ID / a random number / random hex digits

$LINE_COMMENTThe comment marker for the current language, e.g. // or #

$BLOCK_COMMENT_START / _ENDThe block comment markers for the current language

Variable Transforms

${TM_FILENAME/(.*)\..+$/$1/}Regex transform: this one turns app.js into app

/upcase /downcaseChange case: ALL CAPS / all lower

/capitalizeCapitalise the first letter

/camelcase /pascalcasemyFileName / MyFileName

/snakecase /kebabcasemy_file_name / my-file-name

Snippet Settings

editor.snippetSuggestionstop, bottom, inline (default), none: where snippets sit in the list

editor.tabCompletionoff (default), on, onlySnippets: type a prefix and press Tab

editor.suggest.showSnippetsShow snippets in the suggestion list (default true)

editor.suggest.snippetsPreventQuickSuggestionsStop pop-up suggestions while a snippet is active

editor.acceptSuggestionOnEnteron (default), smart, off: whether Enter accepts

Emmet Abbreviations (HTML)

div>pChild: <div><p></p></div>

h1+pSibling: a heading followed by a paragraph

ul>li*3Multiply: a list with three items

li.item$*3$ numbers the copies: item1, item2, item3

div#main.boxAn id and a class on one element

a[href=#]{Click}An attribute in [ ] and text in { }

(h1+p)*2Group with parentheses to repeat several elements

div>p^span^ climbs up one level, so span is a sibling of div

! or html:5A full HTML5 page skeleton

lorem lorem10Placeholder text: default length / ten words

Emmet Abbreviations (CSS)

m10 p10margin: 10px; / padding: 10px;

p10-20padding: 10px 20px;

w100pwidth: 100%;

fz16font-size: 16px;

df jcc aicdisplay: flex;, justify-content: center;, align-items: center;

c#333 bgc#fffcolor: #333; / background-color: #fff;

posa posrposition: absolute; / position: relative;

Emmet Commands (Command Palette)

Emmet: Wrap with AbbreviationWrap the selection in the elements you type

Emmet: Remove Tag / Update TagDelete a tag but keep its content / rename a tag

Emmet: Split/Join TagTurn <br>-style tags into open/close pairs and back

Emmet: Go to Matching PairJump between a tag's opening and closing parts

Emmet: Balance (outward / inward)Grow or shrink the selection by whole tags

Emmet: Go to Next / Previous Edit PointJump between empty spots such as empty attributes

Emmet: Select Next / Previous ItemMove through attributes and values

Emmet: Toggle Comment / Merge LinesComment a tag / merge selected lines into one

Emmet: Evaluate Math ExpressionReplace 10*3 with 30

Emmet: Increment / Decrement by 0.1, 1, 10Change the number under the cursor

Emmet: Reflect CSS ValueCopy a value to its vendor-prefixed twins

Emmet: Update Image SizeFill an img tag's width and height from the file

Show Emmet CommandsList every Emmet command

Emmet Settings

emmet.showExpandedAbbreviationalways (default), never, inMarkupAndStylesheetFilesOnly

emmet.showAbbreviationSuggestionsSuggest abbreviations as you type (default true)

emmet.triggerExpansionOnTabTab expands an abbreviation (default false)

emmet.includeLanguagesUse Emmet in more languages, e.g. { "javascript": "javascriptreact" } (default {})

emmet.excludeLanguagesLanguages where Emmet is off (default ["markdown"])

emmet.useInlineCompletionsShow the expansion as ghost text (default false)

emmet.showSuggestionsAsSnippetsList Emmet suggestions as snippets (default false)

emmet.variablesValues for Emmet's own variables, such as lang and charset

emmet.preferences / emmet.syntaxProfilesFine-tune the output format (both default {})

emmet.extensionsPathFolders holding your own Emmet snippets (default none)

emmet.optimizeStylesheetParsingFaster parsing of large stylesheets (default true)

Snippets to Copy (examples)

"Log": { "prefix": "clg", "body": ["console.log($1);"] }In javascript.json: type clg and accept

"Main guard": { "prefix": "ifmain", "body": ["if __name__ == \"__main__\":", " ${1:main()}"] }In python.json: the usual Python entry-point block

"Date": { "prefix": "today", "body": ["$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE"] }A global snippet that inserts today's date

"editor.tabCompletion": "onlySnippets"Setting: Tab expands snippets only, nothing else

"emmet.triggerExpansionOnTab": trueSetting: Tab expands Emmet abbreviations

My snippet doesn't appear

Check three things: the snippet's scope or file name matches the language of the file you are editing, editor.snippetSuggestions is not none, and you are accepting the suggestion (Tab or Enter) rather than pressing Space. Insert Snippet from the Command Palette lists every snippet that applies to the current file, which is a quick way to tell whether the snippet itself loaded.

Emmet doesn't work in a JSX, PHP or other file

Emmet is on by default for HTML, CSS and similar files. For another language, map it to one Emmet understands with emmet.includeLanguages, for example { "javascript": "javascriptreact" } (.class then becomes className in JSX). Emmet is off in Markdown by default; remove markdown from emmet.excludeLanguages if you want it there.