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键,出现如下图所示界面
红色方框里面的就是模板语法,说明我们的自定义模板完成了