webstorm自定义文件模板

        平时最喜欢用的开发工具就是webstorm，vscode尝试过无数次最后都放弃了。看来看去websotrm的界面最深入人心了，且功能也非常齐全。

        以前每次新建一个vue项目，都会自己手动去补全很多相似的模板，这简直是在浪费大好日光，现在想起来，真是觉得自己很蠢。不过好在现在把这些都配置好了，只要开始了，怎么都不算晚对吧。下面开始正题部分。

        我的版本是2022.1.2，安装了汉语插件的，英语实在是有困难。诉求就是，针对不同的vue项目，输入自定义的标识后，即可生成代码框架。

1. 找到设置窗口：文件 > 设置 
2. 找到编辑器 > 文件和代码模板 > Vue single File Component

能看到红色区域就是webstorm自带的vue模板，但是我们需要自定义，所以先将红色区域全部删除，然后点击“应用”保存。 接下来就根据不同的vue项目版本写自定义模板。

vue2 + js

1.  继续在设置窗口，点击编辑器 > 实时模板 > Vue，然后点击窗口右侧的“+”按钮，选择实时模板
2. 在缩写输入框输入自定义的内容以及这个模板的描述
3. 在模板文本里输入你想要的组件代码框架
4. 点击“定义”下拉框，选择Vue
5. 选择默认为Tab
6. 最后点击应用保存该模板

// vue2的代码框架
<template>
    <div id="container">
    
    </div>
</template>

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

<style scoped>

</style>

测试一下自定义的模板，在项目目录下新建一个vue文件，默认显示为空，然后输入vueb的时候已经出现的vuebasin的补全，点击Tab键，自动生成vue2的代码框架。

 vue2 + ts

 重复上面的步骤，在实时模板里新建缩写为vuets+Tab的快捷键，模板文本设置为

<template>
  <div id="container">

  </div>
</template>

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

@Component
export default class ComponentName extends Vue {

}
</script>

<style scoped>

</style>