Modularize Content in VS Code (for DOCS)

As a technical editor, I work a lot with text. Technical editors write documentation, gather information for release notes or change logs and the like. The layout is often the same, so it is worth to modularize the structural layout patterns (like tables, notes or even whole documents) to save time and be more productive. Visual Studio Code allows you to create so called User Snippets which can be used to create templates for repeating contents/layouts.

To open the user snippet file (in which you define one or more templates), do the following:

• Create a new file (example.md) in Visual Studio Code.

• In VS Code, click on Settings > User Snippets (bottom left corner).

A new window in the middle of the screen is displayed.

• Click on markdown.json to open the user snippet file for the file extension “.md”.

• The code of the markdown.json file is displayed in your editor.

• Add the following code to this file (see screenshot above, at line 15):

    "Table (2 columns)":
    {
    "prefix": "Table (2 columns)",
    "body": [
    "|**${1:Header column 1}**|**${2:Header column 2}**|",
    "|--|--|",
    "|${3:Line 1 column 1}|${4:Line 1 column 2}|",
    "|${5:Line 2 column 1}|${6:Line 2 column 2}|",
    "|${7:Line 3 column 1}|${8:Line 3 column 2}|",
    "|${9:Line 4 column 1}|${10:Line 4 column 2}|",
    "|${11:Line 5 column 1}|${12:Line 5 column 2}|",
    "|${13:Line 6 column 1}|${14:Line 6 column 2}|",
    "|${15:Line 7 column 1}|${16:Line 7 column 2}|",
    "$0"
    ],
    "description": "Table with 2 columns and 7 lines"
    },

Press CTRL + S to save the markdown.json file. This extends your user snippets for markdown files with a template for a table with 2 columns and 7 lines.

• Switch to your markdown file and press CTRL+Space to display the available user snippets.

You now have the “Table (2 columns)” template in your user snippets.

• Press Enter to insert the snippet in your example.md file.

Press Ctrl + K , … V to open the preview of the example.md file.

Press Tab to jump to the different locations in the table.

Feel free to add/create new user snippets (the four dots are spaces -> indent):

No.	Description
1	Enter a unique description here. The entered text is displayed at the right side of the User Snippet menu (CTRL + Space in the example.md file).
2	The Prefix is the "name" of the user snippet. Start typing the name of the snippet in the example file and stop halfway (e.g. type “Tabl” and press CTRL + Space) and VS Code will propose your snippet with the corresponding prefix value.
3	In the "body" you define the lines (separated with a comma at the end) which are added when selecting the user snippet from the menu.
4	With “${No:____}” you can add jump stops. After you have added the user snippet to your example file you can "jump" to each stop with the Tab button. Please note: You should start with No. 1! $0 is already defined as the last jump stop -> see 6.
5	Always end the lines in the body with a comma... otherwise the snippet won't work.
6	$0 ... this is the final jump stop. You get there once you have "tabbed" all stops.
7	​Enter a description here. The description is displayed when you extend additional information about the user snippet.
8	Close the whole user snippet and add a comma at the end.

User snippets also work for other coding languages, just give it a try... it will save you so much time. If you have any questions or need help with user snippets for a different coding language, just drop me a PM at LinkedIn.

Have a nice day,

Jannic