前端学习笔记系列一：7 在vscode中根据vue等模板生成代码

目标：希望每次新建.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='scss' scoped>",

      "</style>"

  ],

    "description": "Log output to console"

  }

保存后关闭，$0 表示你希望生成代码后光标的位置 ; prefix 表示生成对应预设代码的命令。

使用demo：新建一个名为demo.vue的文件，输入vue按下enter，就会自动生成内容啦。

<!--  -->

<template>

  <div></div>

</template>

 

<script>

export default {

  data () {

    return {

    };

  },

 

  components: {},

 

  computed: {},

 

  created() {},

 

  mounted() {},

 

  methods: {}

}

</script>

 

<style lang='scss' scoped>

</style>

后记，当然，你也可以为.js、.html等各种文件预设代码片段。