Creating boilerplate snippets for VS Code

Tired of looking at a blank page when creating a new .vue file? VS Code snippets to the rescue!!

Actually it supports more than us Vue. You can create snippets for any language but this article will focus on Vue (the template is for Vue 3 Composition API).

There is a bit of boiler plate when creating a Vue component and I didn't want to type it out each time. One solution is to use VS Code snippets. It has its own format but you wont have to worry about because there is a fantastic snippet generator by Pawel Grzybek to generate it for us. Here is an example I created.

Once you have your snippet you want to add it to VS Code. 

1. On Windows, hit CTRL + ALT + P, then 
2. Locate "Configure User Snippets". 
3. Choose Vue.json
4. Copy the snippet you generated between the { } curly brackets (see vue.json snippet below)

Now you can 

1. Create a new file with a .vue extension
2. Type vue3-default and press tab
3. 🥳 PRESTO!! You have boiler plate
4. Now have a coffee with your saved time ☕😊

Go ahead and grab the snippet below if you just want to get on with it: