Create your own snippets in VSCode

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

--

--

--

Data & Machine Learning Scientist

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Shan Dou

Shan Dou

Data & Machine Learning Scientist

More from Medium

Visual Studio Code 101 #7 : 10+ HTML CSS extension in recommendation

[VSC] Visual Studio Code 101 #7 : 10+ HTML CSS extension in recommendation

Creating a VS Code Extension

How to draw Breadcrumbs in the Google Map using Vuejs

vsce support