Option to change the order of template and script blocks

[avxkim]

vbase-3-ts-setup produces the following layout:

<template>
  <div>

  </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

Is it possible to change the arrangement to

<script setup lang="ts">

</script>

<template>
  <div>

  </div>
</template>

<style scoped>

</style>

[dajpes]

Any Update on this? @sdras

[messenjer]

There is one PR here https://github.com/sdras/vue-vscode-snippets/pull/110

[fransyrcc]

Hi, it would be good to leave both cases as specified in the documentation for a single-file component top-level element order. The important part is to leave <style> last.

There is a PR that allows both:

• https://github.com/sdras/vue-vscode-snippets/pull/111

[PBK-B]

Let's solve it with one line script 😝

1. Open the terminal execution in the working directory mkdir -p .vscode && curl -L https://raw.githubusercontent.com/sdras/vue-vscode-snippets/943ccfc9ba0b3b85d05dfc8b6f9e220db8ebc81e/snippets/vue.json -o .vscode/vue.json.code-snippets

2. Try typing vbase-3-ts-setup-first and it will work wonders

Thank you @sdras for your contribute, hope it can help you Thank you also for the contributor of this project

[ExEr7um]

I was very annoyed by that too, so I made my own version of extension.

It was built for Vue 3 only. I tuned some existing snippets, added new ones and removed everything related to Vue 2.

Feel free to try it. You can find it here: https://github.com/ExEr7um/vue3-vscode-snippets