Home » vue » Change Standard Scheme in new .vue file in WebStorm

Change Standard Scheme in new .vue file in WebStorm

Posted by: admin November 26, 2021 Leave a comment

Questions:

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>
Answers:

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).