Create your own snippets in VSCode

Special thanks to Scott Tolinski’s tutorial on YouTube

Shan Dou
1 min readJan 5, 2019

Started using Emmet since seeing all the autocompletion magic that Wes Bos does in his CSS grid tutorial. While appreciating the amount of typing Emmet has saved for me, its html5 boilerplate is not as simple as I wish to have. Googled around on how to make customized emmet boilerplate, but I haven’t found an answer that does exactly what I want.

But an even more basic question is: how do I create a custom snippet in VSCode anyways? A quick look of the VSCode docs left me with an impression that the syntax could be complex. Luckily google also offered Scott Tolinski’s youtube tutorial in the search results. A few minutes into the video, my html boilerplate is ready to go. Below is a file saved as html5.code-snippets under ~/Library/Application\ Support/Code/User/snippets/:

Simple html5 boiler plate

The snippet in action: Type html5 and press Tab

Snippet in action: simple boilerplate

--

--

Shan Dou
Shan Dou

Responses (3)