在vscode中创建自定义代码模并支持vue cli开发

使用vs code

vs code真香，很多编译器都是基于vs code再开发。
在这埋在有一些vs code的使用技巧：
http://code.z01.com/doc/vscode.html

有人说，vs code创建文件，没有模板，不好用。
其实vs code是带模板的，其模板原理不是创建时选择，而是建立好文件后，用关键字来激活引用。

创建vue cli模板

.vue文件，大家知道，是用来支持vue开发的，本期教程就从这里开始。
一招鲜，吃遍天，学会了这个在Vscode中快速创建自定义代码模板的教程，我相信创建其它代码模板的方法你也就通个七七八八了。

1.选择菜单里的 文件 > 首选项 > 用户代码片段

20180511174325507.jpg

英文版环境

2.选择你需要自定义模板的文件，以vue为例

选择vue.json创建

3. 配置对应文件json

把代码片段写在json里。每个代码段都是在一个代码片段名称下定义的，并且有prefix、body和description。prefix是用来触发代码片段的。使用 2 等指定光标位置，这些数字指定了光标跳转的顺序，1，3表示光标出现的位置，2为按下一次TAB键后出现的位置，然后依次类推。而$0表示光标最后出现的位置。

{
  "vue-template": {
    "prefix": "vue",
    "body": [
      "",
      "",
      "",
      "",
      ""

    ],
    "description": "my vue template"
  }
}

使用时，只要在.vue文件第一行输入vue根据提示按回车就可以展开了，如下图：

展开vue自定义模板

必要的解释

为了防止大家更改模板时出现不必要的错误，我给大家简单说一下模板中的东西：

• 不要纠结一开头写的："vue"，这只是一个模板名字而已，你也可以完写成：fage。
• "prefix": ""这里规定的是触发模板的关键词，我这里规定触发词为vue。
• 我们的模板都是在"body":[]中编写的。
• 每一行模板代码都要用双引号""来包括。
• 如果双引号包括的代码中间也出现了双引号，那么需要用转义字符\转义。
• \n意味着换行，\t是制表符，这两个用于生成时模板的缩进，让生成出来的模板便于阅读。
• 模板中出现的2,4等。
• "description":""双引号包括的是对模板描述，同时也是你在.html页面输入触发词后，智能提示中出现的对触发词的解释。
• 千万别把Vscode中html.json文件自带的{}覆盖了，只需覆盖注释部分，或直接写到注释下面即可。

逐浪CMS发哥的用法

作为Bootstrap中文站的支持者，发哥在开发中，使用了bootstrapVue插件，所以我就想建立一个带bootstrapVue语法提示的模板，方便开发时提升效率，避免每次去看文档很麻烦，所以我建立了一个这样的模板，大家如果喜欢直接拷过去就行了：

{
    "Print to console": {
            "prefix": "vue",
            "body": [
                    "",
                    "",
                    "",
            ],
            "description": "Log output to console"
    }
}

这面这个模板，在使用时最后输出是这样的形式：

显然，有了注释和提示就更加方便开发啦。

扩展知识

如果要支持bootstrapVue，你可在使用下面命令就行：

npm install vue bootstrap-vue bootstrap

中文手册：http://code.z01.com/bootstrap-vue/

另外，如果你想获得我的完整开发包资料，可以访问下面地址：
www.z01.com/mb
https://github.com/zoomla/ZoomlaCMS-Vuecli-Portal001
https://github.com/zoomla/ZoomlaCMS-VueCli-Portal002

我们会动态更新。

以上就是Vscode中快速创建自定义代码模板的教程了，如果有不懂的问题，欢迎评论。