在vscode中創(chuàng)建自定義代碼模并支持vue cli開發(fā)

使用vs code

vs code真香，很多編譯器都是基于vs code再開發(fā)。
在這埋在有一些vs code的使用技巧：
http://code.z01.com/doc/vscode.html

有人說，vs code創(chuàng)建文件，沒有模板，不好用。
其實vs code是帶模板的，其模板原理不是創(chuàng)建時選擇，而是建立好文件后，用關鍵字來激活引用。

創(chuàng)建vue cli模板

.vue文件，大家知道，是用來支持vue開發(fā)的，本期教程就從這里開始。
一招鮮，吃遍天，學會了這個在Vscode中快速創(chuàng)建自定義代碼模板的教程，我相信創(chuàng)建其它代碼模板的方法你也就通個七七八八了。

1.選擇菜單里的 文件 > 首選項 > 用戶代碼片段

20180511174325507.jpg

英文版環(huán)境

2.選擇你需要自定義模板的文件，以vue為例

選擇vue.json創(chuàng)建

3. 配置對應文件json

把代碼片段寫在json里。每個代碼段都是在一個代碼片段名稱下定義的，并且有prefix、body和description。prefix是用來觸發(fā)代碼片段的。使用 1，2 等指定光標位置，這些數(shù)字指定了光標跳轉的順序，0表示最終光標位置。 body則是模板的內容，其中1，2，3表示光標出現(xiàn)的位置，1為光標首先出現(xiàn)的位置，2為按下一次TAB鍵后出現(xiàn)的位置，然后依次類推。而$0表示光標最后出現(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ù)提示按回車就可以展開了，如下圖：

展開vue自定義模板

必要的解釋

為了防止大家更改模板時出現(xiàn)不必要的錯誤，我給大家簡單說一下模板中的東西：

  • 不要糾結一開頭寫的："vue"，這只是一個模板名字而已，你也可以完寫成：fage。
  • "prefix": ""這里規(guī)定的是觸發(fā)模板的關鍵詞，我這里規(guī)定觸發(fā)詞為vue。
  • 我們的模板都是在"body":[]中編寫的。
  • 每一行模板代碼都要用雙引號""來包括。
  • 如果雙引號包括的代碼中間也出現(xiàn)了雙引號，那么需要用轉義字符\轉義。
  • \n意味著換行，\t是制表符，這兩個用于生成時模板的縮進，讓生成出來的模板便于閱讀。
  • 模板中出現(xiàn)的1代表著光標，它的位置即光標的默認位置，可以有多個光標：2,3,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)建自定義代碼模板的教程了，如果有不懂的問題，歡迎評論。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容