Customizable scaffold snippets

[octref]

#903 is not a good solution. As time goes on we'll have more and more snippet coming in, and we can't just include them all. We should provide a way to let users customize their scaffold snippets.

[coyotte508]

It would be cool to be able to customize "script wtih typescript" snippet to use something like vue-property-decorator.

[marius815]

I completely agree with being able to customize your own scaffold snippets, as I feel even the above PR is lacking my features.

[sandalwoodsh]

Agreed. Allowing users the ability to customize their snippets would be awesome.

[jko206]

I am all for the customizable scaffolding.

At my office, we use the following:

<template>
</template>
<script>
</script>
<style lang="scss" scoped>
@import 'global.scss`;
</style>

I'd like to be able to do this automatically every time I make a new .vue file.

[coyotte508]

Would be nice if there was a way to donate money to specific issues :)

[octref]

This is on the top of my todo list, but just sayin', I wouldn't mind a cup of coffee 😉
https://issuehunt.io/r/vuejs/vetur/issues/1151

[octref]

Here's the rough plan:

• (User level config) Create a folder under snippets of VS Code's user data dir:
  • Windows: %APPDATA%\Code\User\snippets\vetur
  • macOS: $HOME/Library/Application Support/Code/User/snippets/vetur
  • Linux: $HOME/.config/Code/User/snippets/vetur
• (Project level config) Create a folder under .vscode in the project root, .vscode/vetur/snippets/.
• Project level snippets always show up before user level snippets.
• Allow .vue components in the snippets folder. For example, snippets/foo.vue should show a completion item Scaffold with foo.vue.
• You can have top-level folders named after block names and custom blocks. For example, snippets/style/my-style.vue should show a completion style with my-style.
• You can use Textmate snippet syntax in the .vue files.

[IssueHuntBot]

@khoaNguyen96 has funded $20.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[WORMSS]

I wholey support (Project level config) Create a folder under .vscode in the project root, .vscode/vetur/snippets/
that way the entire team can benefit from it just being located in the .git folder.. 👍 👍

I will see if I can get my work to send a little support.

[octref]

[IssueHuntBot]

@octref has rewarded $144.00 to @octref. See it on IssueHunt

• 💰 Total deposit: $160.00
• 🎉 Repository reward(0%): $0.00
• 🔧 Service fee(10%): $16.00

[coyotte508]

Awesome. I updated VSCode just to get the new version and it works great!

[oliverw]

@octref Is that vue-class-component.vue shown in your GIF available somewhere?

[yoyo930021]

@octref Is that vue-class-component.vue shown in your GIF available somewhere?

The GIF is only shown customizable scaffold snippets feature.
You can use this feature for impl your custom vue-class-component.vue snippets.
https://vuejs.github.io/vetur/snippet.html#customizable-scaffold-snippets

[oliverw]

@yoyo930021 Thanks. I was hoping to avoid inventing my own when @octref already did exactly what I need 😄

[yoyo930021]

@yoyo930021 Thanks. I was hoping to avoid inventing my own when @octref already did exactly what I need 😄

It's just a demo.
It's not built into vetur.

[oliverw]

@octref I know. Still, would be useful to have it available for reference.

[bogdankorshunov]

@octref Is it possible to use custom attributes for vetur? I would like to use my snippet like "for" which will output:

v-for="${1} in ${2}'" :key="${1}"
v-for="item in items" :key="item"

Here is a hint of the standard directive