Fri Dec 30 2022358 words
Across projects and within web application you will find yourself creating a lot of repetitive boilerplate code. VS Code and other IDE's (integrated development environments) have support which allows you to include custom code snippets just by typing a reference to them. Using snippets allows you to rapidly scaffold a large application quickly and also speeds up day to day development. The following are Vue 3 VS code snippets which can be used to quickly scaffold files.
To add a snippet in VS code go to - Code > Preferences > Configure User Snippets. You can create a snippet file for your local project, workspace, or globally.
A couple of important keys in the Vue 3 VS code snippets:
Placeholders such as ${1:name} etc can be used in code snippets with a default value and tabbed through in a sequence finishing on \t$0.
{
"Vue 3 component": {
"scope": "vue",
"prefix": "vue-3-component",
"description": "Vue 3 component",
"body": [
"<script setup lang=\"ts\">",
"// props",
"withDefaults(",
" defineProps<{",
" ${2:prop}?: ${3:string}",
"\t$0",
" }>(),",
" {",
" ${2:prop}: undefined",
" }",
")",
"</script>",
"",
"<template>",
" <div class=\"${1:class}\">",
"",
" </div>",
"</template>",
"",
"<style lang=\"scss\" scoped>",
".${1:class} {",
"}",
"</style>",
],
}
}
{
"Vue 3 composition": {
"scope": "javascript,typescript,vue",
"prefix": "vue-3-composition",
"description": "Vue 3 composition",
"body": [
"export function use${1:name}() {",
"\t$0",
" return {",
" }",
"}",
],
}
}