My front-end web projects start as a HTML file, gradually expanding into JavaScript and CSS files as required. A few months ago, I found there was a way to auto-populate the boilerplate HTML code that gives the basic structure for a page in Visual Studio Code: the html, head, body tags, as well as some accompanying meta information in the head tag. When I first saw this feature, I was excited. I could save some time by using this! But, I could not recall how I triggered the code expansion.
I went back to writing the code manually, or trying to rely on GitHub Copilot ^1 to do it for me (although the speed improvements of this method compared to writing the code manually were negligible at best).
This morning, I found out how to instruct VS Code to create the HTML boilerplate code. In the first line of a HTML file open in Visual Studio Code, add the text below, then press enter:
!
To populate only the <!DOCTYPE html> text, you can use !!!.
After further research, this is an Emmet abbreviation, a shortcut in the Emmet syntax to expand concise text into full code in a web application. I have not explicitly used Emmet before but their homepage makes me curious. ^2 It looks like you can make custom abbreviations, too.
Tagged in vs code.