如何使用VS Code快速输入单文件vue模板

赵一楠 发表在:编程 分类下 2019年4月3日

用VS Code写HTML网页时,只需按下!键,即可一键快速输入HTML基础模板,很享受这种便捷。

然而在写Vue的时候,试了几次都没找到快速输入vue模板方法。虽然单文件组件内容不多,但是组件多啊,这种不满一直不断累积。

直到前一阵子,是在无法忍受了,受不了这种效率底下的感受,经过一番折腾找到了解决方案,下面说说怎么做到的。

大致流程如下:

  1. 创建新的Vue代码片段(snippet)
  2. 自定义Vue模板,并设置代码片段识别符(类似指令,让编辑器知道你想要插入一个预设的代码片段)
  3. 在vue文件中输入识别符,VS Code会自动弹出菜单,按回车键快速插入

1. 创建Vue代码片段

打开VS Code“用户代码片段”(User snippets),截图是Mac端举例,Windows端也类似。

选择“vue (Vue)”,表示自定义.vue文件的代码片段。

之后会进入到vue.json的编辑界面,JSON文件中所填写的内容,会根据用户需求插入文档中。

2. 自定义Vue模板

根据个人经验,如下几点:

  • 所有代码片段都只在.vue文件中才生效
  • 一个代码片段对应JSON对象的一个属性
  • 单个代码片段自身也是一个JSON对象,包含prefixbodydescription等属性

代码片段的语法也很简单:

  • prefix表示识别符(前缀),编辑器会根据识别符的输入插入代码片段body中的内容
  • body表示最终插入到文档中的代码内容
  • description是注释,便于日后翻看和维护
  • $1$2等是指插入代码片段以后,光标在代码中停留的位置,按TAB切换位置,$0是指光标最终停留的位置。还可设置默认占位的内容,语法为:${1:label}

可以参考我的设置,再自行改良:

3. 实现快速输入自定义vue模板内容

创建.vue文件,输入预设的识别符prefix字段对应的内容(我设置的!vue),会弹出提示,按下回车即可插入自定义的模板内容,简直爽歪歪,很享受高效的感觉,相信之后再创建vue单文件组件只会是一种享受,而不是一种难受。

看来编程还是需要不断提高生产力,才会感受到快乐,哈哈。

user avatar
取消

1 条评论

user avatar
123
2019年6月14日

nice

回复