Visual Studio Code Snippets

Published: 2022-11-30

Intro

I mainly use Visual Studio Code for my code editing and I have recently discovered how to create custom snippets which are a really handy feature. Snippets are shortcuts that generate code and help you save time. In this post, I will show you how you can create them too.

Software Versions

The following software versions were used in this post.

  • VS Code 1.73.1

Snippets Location

You create snippets based on the files language type. The language type can be found in the bottom right of the VSCode window. In this example I am creating snippets for the Jinja HTML language.

To create a snippet, browse to:

This will open up the jinja-html.json file.

Snippets Creation

Snippets are defined in json documents with the following schema.

json
{
  "<snippet-name>": {
    "prefix": "<snippet-key>",
    "body": [
      "<snippet-code>"
    ],
    "description": "<snippet-description>"
  }
}

To create a snippet you define the prefix which is used to invoke the snippet and the body which is the code that is generated.

The below code block shows the snippets I have configured to aid me in writing blogs for this site.

jinja-html.json
{
  // Place your snippets for jinja here. Each snippet is defined under a snippet name and has a prefix, body and 
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
  // same ids are connected.
  // Example:
  "New Blog": {
    "prefix": "newblog",
    "body": [
      "{% extends \"_layouts/blog.jinja\" %}\n\n{% block page_content %}\n\n<h3 id=\"intro\">Intro</h3>\n<p>\n  \n</p>\n\n<h3 id=\"outro\">Outro</h3>\n<p>\n  \n</p>\n\n{% endblock page_content %}"
    ],
    "description": "New Blog"
  },
  "New Section": {
    "prefix": "newsection",
    "body": [
      "<h3 id=\"$1\">$2</h3>\n<p>\n  $3\n</p>\n"
    ],
    "description": "New Section"
  },
  "Link Internal": {
    "prefix": "linki",
    "body": [
      "{{ link::i(path=\"$1\", description=\"$2\") }}"
    ],
    "description": "Internal HTML link"
  },
  "Link External": {
    "prefix": "linke",
    "body": [
      "{{ link::e(path=\"$1\", description=\"$2\") }}"
    ],
    "description": "External HTML link"
  },
  "Note Block": {
    "prefix": "blocknote",
    "body": [
      "{{ text::note_block(text=\"\n  $1\n\") }}"
    ],
    "description": "Note Block"
  },
  "Warning Block": {
    "prefix": "blockwarn",
    "body": [
      "{{ text::warning_block(text=\"\n  $1\n\") }}"
    ],
    "description": "Warning Block"
  },
  "Tip Block": {
    "prefix": "blocktip",
    "body": [
      "{{ text::tip_block(text=\"\n  $1\n\") }}"
    ],
    "description": "Tip Block"
  },
  "Important Block": {
    "prefix": "blockimportant",
    "body": [
      "{{ text::important_block(text=\"\n  $1\n\") }}"
    ],
    "description": "Important Block"
  },
  "Emphasize Text": {
    "prefix": "emphasize",
    "body": [
      "{{ text::emphasize(text=\"$1\") }}"
    ],
    "description": "Emphasize Text"
  },
  "Keyboard": {
    "prefix": "keyb",
    "body": [
      "{{ text::kbd(text=\"$1\") }}"
    ],
    "description": "Keyboard"
  },
  "Code": {
    "prefix": "codeinline",
    "body": [
      "{{ text::code(text=\"$1\") }}"
    ],
    "description": "Code"
  },
  "Code Block": {
    "prefix": "codeblock",
    "body": [
      "{{ text::code_block(\n  header=\"$1\",\n  language=\"$2\",\n  code=`$3`\n) }}"
    ],
    "description": "Code Block"
  },
  "Breadcrumbs": {
    "prefix": "breadcrumbs",
    "body": [
      "{{ text::breadcrumbs(items=[\n  \"$1\",\n  \"$2\",\n]) }}"
    ],
    "description": "Breadcrumbs"
  },
  "Table Default": {
    "prefix": "tabledefault",
    "body": [
      "{{ table::default(\n  header=[\"$1\"],\n  rows=[\"$2\"],\n) }}"
    ],
    "description": "Default table"
  }
}

Snippets Usage

To use a snippet you start typing the prefix you defined and it will appear in the contet menu.

For example, to stub out a new blog I type newblog which generates the following code.

jinja-html
{% extends "_layouts/blog.jinja" %}

{% block page_content %}

<h3 id="intro">Intro</h3>
<p>
  
</p>

<h3 id="ontro">Outro</h3>
<p>
  
</p>

{% endblock page_content %}

Or to hightlight some text I type emphasize to generate this:

jinja-html
{{ text::emphasize(text="") }}

Outro

I have found that snippets are saving me time in writing blogs. I hope you have found this useful and can save some of your precious time as well.

Tags

#vscode