I often want to spin up a really simple Vue app to test something, build a demo, or just to explore an idea. The Vue CLI is awesome if you need the whole shebang — Webpack, single file components, CSS pre-processing — but that feels like a big commitment when all you need is an html file, with links to Vue on a CDN somewhere.

After a bit of research on how to create a new snippet for Visual Studio Code that would output this Vue-centric boilerplate, I was chagrined to find that I’d have to format the entire thing as an array of Javascript strings, escaping all the quotation marks along the way. Ew. Then I came across this awesome tool by Pawel Grzybek buried in a Stack Overflow answer, which does all of that ickiness for you! You just write the snippet, give it a name and a prefix (the bit you type to access the snippet) and it generates the correctly-formatted JSON file for VS Code (as well as formats for Atom and Sublime Text).

Mine looks like this:

It uses a few of the features I discovered in the VS Code Snippets documentation.

Snippet variables

It’s always nice to leave some clues about this file for your future self, so you can start by adding the date in a comment, like so:

"$BLOCK_COMMENT_START",

" $CURRENT_MONTH/$CURRENT_DATE/$CURRENT_YEAR",

"$BLOCK_COMMENT_END",

By using $BLOCK_COMMENT_START and $BLOCK_COMMENT_END you can make your snippet a little more language-agnostic, in case you want to make it a global snippet, or one that’s available in multiple filetypes.

Along with many time and date variables, there are file-related variables as well as selection variables, such as TM_SELECTED_TEXT , for snippets that need to wrap around a selection. Check the docs for all the options.

Placeholders and tabstops

A little note about what the heck you were thinking when you created this file can be helpful, too. You can use a placeholder for this. Placeholders look like:

{$1:Description}

Once the snippet is expanded, the cursor will stop at each placeholder, with the default text (in this case ‘Description’) highlighted so it can be easily replaced.

A placeholder in a VS Code snippet

A placeholder is just a slightly souped-up tabstop. If all you want to do is create an insertion point in a snippet, you can use a tabstop, like $1 .

The number determines the tab order.

Linked placeholders

Any placeholders with the same tabstop number are updated together. So if, for example, we don’t always want to use #app as the base element for Vue, we could do:

" <div id=\"${5:app}\">",

" </div>",

" <script>",

" var app = new Vue({",

" el: '#${5:app}',",

" data: {",

" }",

" })",

" </script>",

Link placeholders by using the same tabstop number

Snippet choices

You have a choice when linking to Vue on a CDN — the development version which is bulkier but shows useful warnings, or the production version which is minified. You can build such a choice right into a snippet:

{$1|'Option one','Option 2\, with a comma','Option 3'|}

Or, for our CDN link:

"<script src=\"${3|https://cdn.jsdelivr.net/npm/vue/dist/vue.js,https://cdn.jsdelivr.net/npm/vue|}\"></script>",

Unfortunately, there isn’t a way to provide a label for each choice, and I know I’m not going to remember which is which, so instead I wrote it like:

"${3|<!--dev--><script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>,<!--prod--><script src=\"https://cdn.jsdelivr.net/npm/vue/\"></script>|} ",

Which ends up looking like: