webstorm自定义自动补全

发现当前的工作中，很多代码都是可以提炼成模板的，要是撸代码的时候，可以直接利用工具一键补全，是不是996很大可能上可以变成966了呀

webstorm其实一直有这个功能，只是我一直没将其功能进行最大化使用，懊悔

废话不多说，下面就举例说明如何在webstorm上自定义代码补全

需求：
当新写vue组件时候，新文档中输入template+tab键，即可生成如下组件的代码框架

<template>
</template>

<script>
    export default {
        name: '',
        template: '',
        components: {
        },
        props: {
        },
        data () {
            return {      
            };
        },
        methods: {
        }
    };
</script>

step1：file --> Settings --> Live Templates
webstorm自定义自动补全

step2: 选择Vue --> 点击 + --> Live Templates

step3: 配置快捷键及对应的补全文档，如图：
webstorm自定义自动补全
step4: 点击Define --> 选择vue --> 点击ok

大功告成，赶紧打开一个vue文件，输入template + tab键，看看发生了什么吧！！