published: 30th of November 2022
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.
The following software versions were used in this post.
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 are defined in json documents with the following schema.
{
"<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.
{
// 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\nIntro
\n\n \n
\n\nOutro
\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"
}
}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.
{% 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:
{{ text::emphasize(text="") }}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.