Quickly create HTML Boilerplate in VSCode

Are you looking for a way to quickly create HTML boilerplate code in VSCode? Boilerplate code is a term widely used in computer programming, which refers to the repetitive code sections that needs to be used every now and then with little to no alterations. The term actually originated from the steel industry, further spreaded in the newspaper industry and later among computer programmers.

Boilerplate code is often used when referring to languages that are considered verbose, i.e. the programmer must write a lot of code to do minimal jobs, such as HTML.

In this article, we will show you how to quickly create HTML boilerplate code in VSCode.

Create HTML boilerplate using Emmet Abbreviation

This is by far the easiest way to create en empty HTML boilerplate code in VSCode. You don’t have to install anything, as Emmet Abbreviation is built into VSCode.

First, you have to create an empty index.html file. After that, open it up in VSCode and type ! (exclamation mark). You will see a pop up looks like below.

Now you can either select the option using the mouse or simply press Tab key to put the HTML boilerplate into the file.

Troubleshoot Emmet Abbreviation in VSCode

Please note that the Emmet Abbreviation in VSCode only works if VSCode detects your file as HTML format. In other words, the file you’re editing is recognized as HTML in VSCode Language Mode.

If you type ! and don’t see anything pop up, you must select the proper Language Mode by clicking its icon at the lower right corner of the editor.

In the drop-down menu, search for HTML, then repeat the steps above to quickly trigger Emmet Abbreviation to create your HTML boilerplate.

Create more complex HTML boilerplate

The syntax for Emmet Abbreviation in VSCode is already very quick, but you can even take things further. In fact, Emmet Abbreviation follows a series of syntax you can use to quickly create a proper HTML document in the shortest time possible.

For example, one can create a nested <ul> using the syntax nav>ul>li, VSCode will trigger Emmet Abbreviation to create :

<nav> <ul> <li></li> </ul> </nav>
Code language: HTML, XML (xml)

Similarly, you can quickly generate a <div> tag with multiple classes by entering div.first-class.second-class followed by a Tab.

<div class="first-class second-class"></div>
Code language: HTML, XML (xml)

There are many more quick shortcuts for other types of HTML tags, you can find details at the Emmet Docs Cheat Sheet.

Custom HTML Boilerplate Template

If you’re working on a custom project that uses a specific set of template, but differs significantly from Emmet Abbreviation default HTML boilerplate, you can create your own. Simply follow the steps below.

  • First, take your HTML boilerplate and convert it into a JSON escaped string. You can paste it into one of the many online tools, such as this one
  • In VSCode, go to File > Preferences > User Snippets to open up the settings for HTML snippets.VSCode settings for HTML snippets
  • In the drop-down menu, search for HTML to open up html.json.html.json in VSCode
  • Put the following lines inside the brackets, remember to replace JSON_ESCAPED_HTML_BOILERPLATE with the JSON-escaped string from the first step and !cust with your desired custom command.
{ "HTML boilerplate": { "prefix": "!cust", "body": [ "JSON_ESCAPED_HTML_BOILERPLATE" ], "description": "Custom HTML boilerplate of my own" } }
Code language: JSON / JSON with Comments (json)
  • Once you save the file, VSCode will be automatically updated with the new settings. In this example, entering !cust followed by a Tab will create us a new, customized HTML boilerplate.

Custom HTML Snippets in VSCode

You can define custom HTML boilerplate snippets of your own in VSCode by editing Emmet configuration. Let’s get started.

  • First, you have to create a snippets.json file. This is the configuration file where we store all our snippets for Emmet. You can place it anywhere you want, as we are going to point VSCode settings to its path later.

  • Suppose we’re need to quickly create a <h1> tag wrapped in a <div> tag, fill the snippets.json file with the contents below and save the file.

    { "html": { "snippets": {   "customSnippet": ".container>h1.title" } } }
  • Now open up VSCode settings by pressing Ctrl + , keyboard shortcut. Search for a setting called Extensions Path and click on Add Item. Custom HTML Snippets in VSCode

  • Enter the absolute path to the parent directory where our snippets.json is placed. In this example, we’re using /home/nl/emmet/. Custom HTML Snippets in VSCode

  • Once we added the settings for Emmet, VSCode loads the configuration immediately. You can enter a few letters and VSCode can autocomplete the rest like the following image. Custom HTML Snippets in VSCode

We hope that the post helped you learn how to quickly create a HTML boilerplate as well as HTML snippets in VSCode and further improve your programming workflow. You may want to check out our other guides on Automate your workflow with VSCode Tasks , Format JSON in VSCode or Fix IntelliSense in VSCode. All our VSCode tutorials can be found at VSCode Tutorials. If you have any question, don’t hesitate to let us know in the comments section below.

Leave a Comment