前端学习笔记系列一：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等各种文件预设代码片段。