vue.jstemplateswebstorm

Change Standard Scheme in new .vue file in WebStorm

I'm using WebStorm 2021.2.1 and Vue.js with TypeScript and vue-property-decorator.

When I create a new .vue file, WebStorm creates the file with a standard scheme like this:

<script>
export default {
  name: "NewComponent",
};
</script>

<style scoped></style>

How can I change the style of the component to automatically be like below?

<script lang=ts>
import { Component, Vue } from "vue-property-decorator";

@Component
export default class NewComponent extends Vue {
  name = "NewComponent"
};
</script>

<style scoped></style>
Solution

  • As I understand, you want to create a new file template. This should help you in this case: File templates

    File templates are specifications of the default contents for new files that you create. Depending on the type of file you are creating, templates provide initial code and formatting expected in all files of that type (according to industry or language standards, your corporate policy, or for other reasons).