使用vs code
vs code真香福扬，很多編譯器都是基于vs code再開發(fā)嚼鹉。
在這埋在有一些vs code的使用技巧：
http://code.z01.com/doc/vscode.html
有人說，vs code創(chuàng)建文件，沒有模板挣饥，不好用。
其實vs code是帶模板的沛膳，其模板原理不是創(chuàng)建時選擇扔枫，而是建立好文件后，用關(guān)鍵字來激活引用锹安。
創(chuàng)建vue cli模板
.vue文件短荐，大家知道，是用來支持vue開發(fā)的叹哭，本期教程就從這里開始忍宋。
一招鮮，吃遍天风罩，學(xué)會了這個在Vscode中快速創(chuàng)建自定義代碼模板的教程糠排，我相信創(chuàng)建其它代碼模板的方法你也就通個七七八八了。
1.選擇菜單里的 文件 > 首選項 > 用戶代碼片段
2.選擇你需要自定義模板的文件超升，以vue為例
3. 配置對應(yīng)文件json
把代碼片段寫在json里入宦。每個代碼段都是在一個代碼片段名稱下定義的，并且有prefix室琢、body和description乾闰。prefix是用來觸發(fā)代碼片段的。使用 2 等指定光標(biāo)位置涯肩，這些數(shù)字指定了光標(biāo)跳轉(zhuǎn)的順序，
1，
3表示光標(biāo)出現(xiàn)的位置铅乡，
2為按下一次TAB鍵后出現(xiàn)的位置烈菌，然后依次類推阵幸。而$0表示光標(biāo)最后出現(xiàn)的位置花履。
{
"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根據(jù)提示按回車就可以展開了挚赊，如下圖：
必要的解釋
為了防止大家更改模板時出現(xiàn)不必要的錯誤诡壁，我給大家簡單說一下模板中的東西：
- 不要糾結(jié)一開頭寫的："vue"，這只是一個模板名字而已荠割，你也可以完寫成：fage妹卿。
- "prefix": ""這里規(guī)定的是觸發(fā)模板的關(guān)鍵詞，我這里規(guī)定觸發(fā)詞為vue蔑鹦。
- 我們的模板都是在"body":[]中編寫的夺克。
- 每一行模板代碼都要用雙引號""來包括。
- 如果雙引號包括的代碼中間也出現(xiàn)了雙引號嚎朽，那么需要用轉(zhuǎn)義字符\轉(zhuǎn)義铺纽。
- \n意味著換行，\t是制表符哟忍，這兩個用于生成時模板的縮進狡门，讓生成出來的模板便于閱讀。
- 模板中出現(xiàn)的
2,
4等。
- "description":""雙引號包括的是對模板描述爆安，同時也是你在.html頁面輸入觸發(fā)詞后叛复，智能提示中出現(xiàn)的對觸發(fā)詞的解釋。
- 千萬別把Vscode中html.json文件自帶的{}覆蓋了鹏控，只需覆蓋注釋部分致扯，或直接寫到注釋下面即可肤寝。
逐浪CMS發(fā)哥的用法
作為Bootstrap中文站的支持者当辐，發(fā)哥在開發(fā)中，使用了bootstrapVue插件鲤看，所以我就想建立一個帶bootstrapVue語法提示的模板缘揪，方便開發(fā)時提升效率，避免每次去看文檔很麻煩义桂，所以我建立了一個這樣的模板找筝，大家如果喜歡直接拷過去就行了：
{
"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>
顯然慷吊，有了注釋和提示就更加方便開發(fā)啦袖裕。
擴展知識
如果要支持bootstrapVue，你可在使用下面命令就行：
npm install vue bootstrap-vue bootstrap
中文手冊：http://code.z01.com/bootstrap-vue/
另外溉瓶，如果你想獲得我的完整開發(fā)包資料急鳄，可以訪問下面地址：
www.z01.com/mb
https://github.com/zoomla/ZoomlaCMS-Vuecli-Portal001
https://github.com/zoomla/ZoomlaCMS-VueCli-Portal002
我們會動態(tài)更新谤民。
以上就是Vscode中快速創(chuàng)建自定義代碼模板的教程了，如果有不懂的問題疾宏，歡迎評論张足。
