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

Intro

\n

\n \n

\n\n

Outro

\n

\n \n

\n\n{% endblock page_content %}" ], "description": "New Blog" }, "New Section": { "prefix": "newsection", "body": [ "

$2

\n

\n $3\n

\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.

# vscode