使用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": [
"<template>",
" <div class=\"$1\">",
"",
" </div>",
"</template>",
"",
"<script>",
"export default {",
" name: '$1',",
" data() { ",
" return {",
"",
" }",
" }",
" }",
"</script>",
"",
"<style lang=\"\" scoped>",
" .$1{",
"",
" }",
"</style>"
],
"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": [
"<template>",
"<div class=\"$1\">",
"<b-container fluid=\"xl\" class=\"\">",
" <b-row>",
" <b-col md=\"4\" offset=\"2\">left test",
" </b-col>",
" <b-col md=\"6\">right test",
" </b-col>",
" </b-row>",
"</b-container>",
"",
"",
"<!-- 其它BootstrapVue模板语法：",
" <b-img src=\"../assets/images/caifu_hero.png\" alt=\"\"></b-img>",
"",
" <b-button variant=\"danger\">Button</b-button>",
"",
" <b-form-input v-model=\"text\" placeholder=\"Enter your name\"></b-form-input>",
"",
" <b-navbar toggleable=\"lg\" type=\"dark\" variant=\"info\">",
" <b-navbar-brand href=\"#\">NavBar</b-navbar-brand>",
" <b-navbar-toggle target=\"nav-collapse\"></b-navbar-toggle>",
" <b-collapse id=\"nav-collapse\" is-nav>",
" <b-navbar-nav>",
" <b-nav-item href=\"#\">Link</b-nav-item>",
" <b-nav-item href=\"#\" disabled>Disabled</b-nav-item>",
" </b-navbar-nav>",
" <b-navbar-nav class=\"ml-auto\">",
" <b-nav-form>",
" <b-form-input size=\"sm\" class=\"mr-sm-2\" placeholder=\"Search\"></b-form-input>",
" <b-button size=\"sm\" class=\"my-2 my-sm-0\" type=\"submit\">Search</b-button>",
" </b-nav-form>",
" <b-nav-item-dropdown text=\"Lang\" right>",
" <b-dropdown-item href=\"#\">EN</b-dropdown-item>",
" <b-dropdown-item href=\"#\">CN</b-dropdown-item>",
" </b-nav-item-dropdown>",
" <b-nav-item-dropdown right>",
" <template v-slot:button-content>",
" <em>User</em>",
" </template>",
" <b-dropdown-item href=\"#\">Profile</b-dropdown-item>",
" <b-dropdown-item href=\"#\">Sign Out</b-dropdown-item>",
" </b-nav-item-dropdown>",
" </b-navbar-nav>",
" </b-collapse>",
" </b-navbar>",
"更多技巧详见 http://code.z01.com/doc/vue.html",
" -->",
"",
"</div>",
"</template>",
"<script>",
"export default {",
" name: \"$1\",",
" data(){",
" return {}",
" },",
" components: {},",
" created(){},",
" mounted(){},",
" methods: {}",
"}",
"</script>",
"<style lang='scss' scoped>",
"</style>",
],
"description": "Log output to console"
}
}
这面这个模板，在使用时最后输出是这样的形式：
<template>
<div class="">
<b-container fluid="xl" class="">
<b-row>
<b-col md="4" offset="2">left test
</b-col>
<b-col md="6">right test
</b-col>
</b-row>
</b-container>
<!-- 其它BootstrapVue模板语法：
<b-img src="../assets/images/caifu_hero.png" alt=""></b-img>
<b-button variant="danger">Button</b-button>
<b-form-input v-model="text" placeholder="Enter your name"></b-form-input>
<b-navbar toggleable="lg" type="dark" variant="info">
<b-navbar-brand href="#">NavBar</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item href="#">Link</b-nav-item>
<b-nav-item href="#" disabled>Disabled</b-nav-item>
</b-navbar-nav>
<b-navbar-nav class="ml-auto">
<b-nav-form>
<b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
</b-nav-form>
<b-nav-item-dropdown text="Lang" right>
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">CN</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown right>
<template v-slot:button-content>
<em>User</em>
</template>
<b-dropdown-item href="#">Profile</b-dropdown-item>
<b-dropdown-item href="#">Sign Out</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
更多技巧详见 http://code.z01.com/doc/vue.html
-->
</div>
</template>
<script>
export default {
name: "",
data(){
return {}
},
components: {},
created(){},
mounted(){},
methods: {}
}
</script>
<style lang='scss' scoped>
</style>
显然，有了注释和提示就更加方便开发啦。
扩展知识
如果要支持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中快速创建自定义代码模板的教程了，如果有不懂的问题，欢迎评论。
网友评论