Skip to content

Instantly share code, notes, and snippets.

@kielmarj
Last active November 11, 2024 11:11
Show Gist options
  • Select an option

  • Save kielmarj/fd30e102755cde2681912ba26bdb27e1 to your computer and use it in GitHub Desktop.

Select an option

Save kielmarj/fd30e102755cde2681912ba26bdb27e1 to your computer and use it in GitHub Desktop.

VS Code snippet basics

Excerpts from the VS Code Docs

Tab Stops

Tab stops are specified by a dollar sign and an ordinal number e.g. $1 . $1 will be the first location, $2 will the second location, and so on. $0 is the final cursor position, which exits the snippet mode. For example, let's say we want to make an HTML div snippet and we want the first tab stop to be between the opening and closing tags. We also want to allow the user to tab outside of the tags to finish the snippet.

{
    "Insert div": {
        prefix: "div",
        body: ["<div>","$1","</div>", "$0"]
    }
}

Mirrored Tab Stops

There are times when you need to provide the same value in several places in the inserted text. In these situations you can re-use the same ordinal number for tab stops to signal that you want them mirrored. Then your edits are synced. A typical example is a for loop which uses an index variable multiple times. Below is a JavaScript example of a for loop.

{
    "For Loop": {
        "prefix": "for",
        "body": [
            "for (let ${1:index} = 0; ${1:index} < ${2:array}.length; ${1:index}++) {",
            "\tconst ${3:element} = ${2:array}[${1:index}];",
            "\t$0",
            "}"
        ]
    }
}

Placeholders

Placeholders are tab stops with default values. They are wrapped in curly braces, for example ${1:default}. The placeholder text is selected on focus such that it can be easily edited. Placeholders can be nested, like this: ${1:first ${2:second}}.

{
  "Insert task list": {
    "prefix": "task",
    "body": ["- [${1| ,x|}] ${2:text}", "${0}"]
}

Variables

There is a good selection of variables you can use. You simply prefix the name with a dollar sign to use them, for example $TM_SELECTED_TEXT. For example, this snippet will create a block comment for any language with today's date:

{
    "Insert block comment with date": {
        prefix: "date comment",
        body: ["${BLOCK_COMMENT_START}",
               "${CURRENT_YEAR}/${CURRENT_MONTH}/${CURRENT_DATE} ${1}",
               "${BLOCK_COMMENT_END}"]
    }
}

Defined variables

  • TM_SELECTED_TEXT: The currently selected text or the empty string,
  • TM_CURRENT_LINE: The contents of the current line,
  • TM_CURRENT_WORD: The contents of the word under cursor or the empty string,
  • TM_LINE_INDEX: The zero-index based line number,
  • TM_LINE_NUMBER: The one-index based line number,
  • TM_FILENAME: The filename of the current document,
  • TM_FILENAME_BASE: The filename of the current document without its extensions,
  • TM_DIRECTORY: The directory of the current document,
  • TM_FILEPATH: The full file path of the current document,
  • CLIPBOARD: The contents of your clipboard,
  • WORKSPACE_NAME: The name of the opened workspace or folder.
  • CURRENT_YEAR: The current year,
  • CURRENT_YEAR_SHORT: The current year's last two digits,
  • CURRENT_MONTH: The month as two digits (example '07'),
  • 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,
  • 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 format,
  • CURRENT_MINUTE: The current minute,
  • CURRENT_SECOND: The current second,
  • CURRENT_SECONDS_UNIX: The number of seconds since the Unix epoch.
  • BLOCK_COMMENT_START: For example, <!-- in HTML.
  • BLOCK_COMMENT_END: For example , --> in HTML.
  • LINE_COMMENT: For example, // in JavaScript.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment