Option to change the order of template and script blocks

sdras / vue-vscode-snippets

These snippets were built to supercharge my workflow in the most seamless manner possible.

MIT License

1.33k stars 185 forks source link

Open avxkim opened 2 years ago

avxkim commented 2 years ago

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 commented 2 years ago

Any Update on this? @sdras

messenjer commented 2 years ago

fransyrcc commented 2 years ago

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:

PBK-B commented 2 years ago

Let's solve it with one line script 😝

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
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 commented 2 years ago

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.