【tools第3期】vsCode根據模板生成代碼

新建.vue文件後，vsCode可以根據配置，自動生成咱們想要的內容。

方法

打開vsCode編輯器，依次選擇"文件->首選項->用戶代碼片斷"，此時，會彈出一個搜索框，咱們輸入vue， 以下：

選擇vue後，vsCode會自動打開一個名字爲vue.json的文件，複製如下內容到這個文件中：

{
  "Print to console": {
    "prefix": "vue",
    "body": [
      "<!-- $0 -->",
      "<template>",
      " <div></div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      " data () {",
      " return {",
      " };",
      " },",
      "",
      " components: {},",
      "",
      " computed: {},",
      "",
      " mounted: {},",
      "",
      " methods: {}",
      "}",
      "",
      "</script>",
      "<style lang='stylus' scoped>",
      "</style>"
  ],
    "description": "Create vue template"
  }
}
複製代碼

保存後關閉這個文件。

注意 $0 表示你但願生成代碼後光標的位置 ; prefix 表示生成對應預設代碼的命令

例如：咱們新建一個名爲index.vue的文件，輸入vue按下enter，就會自動生成內容啦。以下：

<!--  -->
<template>
  <div></div>
</template>

<script>
export default {
  data () {
    return {

    };
  },

  components: {},

  computed: {},

  mounted: {},

  methods: {}
}

</script>
<style lang='stylus' scoped>
</style>
複製代碼

若有侵權，請發郵箱至wk_daxiangmubu@163.com 或留言，本人會在第一時間與您聯繫，謝謝！！

長按二維碼關注咱們，瞭解最新前端資訊