WebStorm笔记之自定义模板

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。这里介绍一下怎么在webstorm里面怎么自定义模板
打开webstorm，界面如下
然后点击左上角的file，然后点击settings，跳转界面之后，找到Editor，然后有个live template的选项。

点进去之后到了如下所示界面

在这里选择要自定义的模板类型，我这里以vue为例子，选中vue，并注意右上角有个加号

点击右上角的加号，选择live template，出现如下的界面

这里红色椭圆圈起来的地方，是模板的启动语句，我这里用vue表示，可以自己定义，红色方框是描述，随便说点什么，提醒自己用的，绿色椭圆位置填写模板代码

我这里模板填的语法如下：

<div id="app">
    <h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message:'你好呀!'
        }
    })
</script>

注意最下面的change，点击之后，选择模板应用的范围，根据个人习惯选择即可。然后点击ok，这样自定义模板就设计好了。回到页面试试效果

这是一个新建的html文件，在body里面输入模板启动语句vue（我这里的模板设置的是vue，根据自己设置的填），然后敲击Tab键，出现如下图所示界面

红色方框里面的就是模板语法，说明我们的自定义模板完成了