How to add custom HTML boilerplates to VS Code

Here's a quick guide on how to add your own HTML boilerplates to VS Code, so you can easily start a new page with a fixed structure already in place. I find this super useful, especially in my Scrapbox section where every article has the same layout (same stylesheet, footer navigation, etc).

What's a boilerplate?

A boilerplate is a chunk of HTML you can paste into a new file to get started quickly. It saves you from rewriting stuff like <!DOCTYPE html><html><head>...</head><body>...</body></html> every single time.

In VS Code there's already a built in boilerplate you can use by typing in ! and hitting Tab. It gives you this:

                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

That's great, but sometimes you need a custom structure, maybe you always link to the same stylesheet, or you want some specific tags in place. That's where custom boilerplates come in.

Adding your own boilerplate

In VS Code:

Ctrl+Shift+P (or Cmd+Shift+P on Mac) to open Command Palette
Search for Configure User Snippets
Choose your language (in this case, html.json)

Snippets are just block of codes you can quickly insert into your files. You can use this for all sort of things, but in this case we're using them to create a custom HTML boilerplate.

You can write the snippet by hand, or use this site to convert your existing HTML into snippet format. There's also a VS Code extension called Snippet Creator that does the same thing. Or, if you're comfortable with Python, you can even write a small script to automate it.

Example HTML snippet:

{
    "Custom HTML Template": {
        "prefix": "myhtml",
        "body": [
            "<!DOCTYPE html>",
            "<html>",
            "",
            "<head>",
            "    <meta charset=\"utf-8\">",
            "    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
            "    <title>$1</title>",
            "    <meta name=\"description\" content=\"$2\">",
            "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
            "    <link rel=\"stylesheet\" href=\"/style.css\">",
            "</head>",
            "",
            "<body>",
            "    <script src=\"\" async defer></script>",
            "</body>",
            "",
            "</html>"
        ],
        "description": "HTML template for my neocities pages"
    }
}

What it means:

"Custom HTML Template" : the name of your snippet, can be anything
prefix : what you type to trigger the snippet
body : the code you want to insert
Use $1, $2 and etc. to set tab stops.

After triggering it with myhtml and pressing Tab, your cursor will land on $1, then $2, and so on. Useful for editing titles, descriptions, or content quickly.

To add another snippet, just add another object inside the same top-level curly braces.

This method saves me a lot of time when I'm writing lots of similar pages, especially for blogs, notes, or documentation. If you build anything with repeated layouts, it's worth the few minutes to set this up.

You could even make a whole collection of your favorite snippets: cards, footers, embeds, etc.