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:

	<template>
	<div>
	<!--start-here-->
	</div>
	</template>
	<script setup>
	import { ref, computed } from 'vue'
	// props and emits
	const props = defineProps(['someProp'])
	const emits = defineEmits(['someEmit'])
	// data
	const someVal = ref(null)
	//computed
	const someComputed = computed(() => {
	return null
	})
	//functions
	function someFunction() {
	// code here
	}
	</script>

view raw boilerplate.vue3 hosted with ❤ by GitHub

	{
	"Vue3 Component Snippet by Ainsof So'o": {
	"prefix": "vue3-default",
	"body": [
	"<template>",
	"<div>",
	" <!--start-here-->",
	"</div>",
	"</template>",
	"",
	"<script setup>",
	"import { ref, computed } from 'vue'",
	"// props and emits",
	"const props = defineProps(['someProp'])",
	"const emits = defineEmits(['someEmit'])",
	"// data",
	"const someVal = ref(null)",
	"//computed",
	"const someComputed = computed(() => {",
	" return null",
	"})",
	"//functions",
	"function someFunction() {",
	" // code here",
	"}",
	"</script>"
	],
	"description": "Vue3 Component Snippet by Ainsof So'o"
	},
	"Create props": {
	"prefix": "props",
	"body": ["const props = defineProps(['someProp'])"],
	"description": "Create props"
	},
	"Create emits": {
	"prefix": "emits",
	"body": ["const emit = defineEmits(['someEmit'])"],
	"description": "Create emits"
	},
	"Create ref": {
	"prefix": "ref",
	"body": ["import { ref } from 'vue'", "const someVal = ref(null)"],
	"description": "Create ref"
	},
	"Create computed ": {
	"prefix": "computed ",
	"body": [
	"import { computed } from 'vue'",
	"const someComputed = computed(() => {",
	" return null",
	"})"
	],
	"description": "Create computed "
	}
	}

view raw vue-plus.json hosted with ❤ by GitHub

	{
	"Vue3 Component Snippet by Ainsof So'o": {
	"prefix": "vue3-default",
	"body": [
	"<template>",
	"<div>",
	" <!--start-here-->",
	"</div>",
	"</template>",
	"",
	"<script setup>",
	"import { ref, computed } from 'vue'",
	"// props and emits",
	"const props = defineProps(['someProp'])",
	"const emits = defineEmits(['someEmit'])",
	"// data",
	"const someVal = ref(null)",
	"//computed",
	"const someComputed = computed(() => {",
	" return null",
	"})",
	"//functions",
	"function someFunction() {",
	" // code here",
	"}",
	"</script>"
	],
	"description": "Vue3 Component Snippet by Ainsof So'o"
	}
	}

view raw vue.json hosted with ❤ by GitHub