Add Code Snippets to Visual Studio Code! An exmaple for Quarto language

What are Code Snippets?

Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements.

How to add Code Snippets to Visual Studio Code?

The official documentation for adding code snippets to Visual Studio Code can be found here. I am gonna show you an example of how to add a code snippet for Quarto language.

If you don’t know what Quarto is, you can check out its website. It is a great tool for reproducible research and technical writing.

My goal is to add a code snippet for Quarto’s Beamer format, because I use it a lot by writing lecture notes.

1. Add a new code snippets by seleting from the Command Palette (Ctrl+Shift+P) by first typing “Configure User Snippets” and then selecting “New Global Snippets File…”.
2. Select the scope of the code snippet. In my case, I want to add a code snippet for Quarto’s Beamer format, so I will select “quarto, qmd, md”.
3. The prefix is the shortcut that will be used to trigger the code snippet. In my case, I will use “block_q”.
4. The body is the content of the code snippet. Each string is a new line. The ${0:Question} is a placeholder for the cursor. The cursor will be placed at the position of the placeholder after the code snippet is triggered.

	"Question Block": {
		"scope": "quarto, qmd, md",
		"prefix": "block_q",
		"body": [
			"\\begin{block}{Question}",
			"\t${0:Question}",
			"\\end{block}",
		],
		"description": "block of question"
	},

After adding the code snippet, you can use it by typing “block_q” and then pressing “Tab” key. NOTE: be sure to reopen the vscode window after adding the code snippet.