Making VueJS Snippets in VSCode

Having code snippets can be handy for your workflow. Especially when working on a large project that requires you to add new files with boilerplate code every so often.

Here is a quick way to add VueJS snippets in Visual Studio Code. (The process is similar for other languages)

  1. Go to Code Preferences User Snippets
User Snippets

2. In the prompt that pops up, select the syntax highlighter you use for vue

Syntax Highlighter

I use (and highly recommend) Vue Components by Sean Washington

VSCode will open up a vue.json file where you can now add custom snippets.

Here is a nifty one for new .vue component files


* vue.json *

{
"New File": {
"prefix": "template",
"body": [
"<template>",
"\t<div class='${name}'></div>",
"</template>",
"",
"<script>",
"\texport default {",
"\t\tname: '${name}'",
"\t}",
"</script>",
"",
"<style lang='sass'>",
"\t.${name} {",
"",
"\t}",
"</style>"
]
}
}
VSCode Intellisense
Snippet with Variables

That's it! Now add custom snippets or get some made for Atom and Sublime