vscode创建用户代码片段

在开发工作中，需要避免重复代码的编写，每个vue文件的结构是相同的，这个时候就需要创建用户代码片段，通过指令完成重复结构的创建。 具体操作如下：

1.点击设置设置->用户代码片段

点击之后出现

这里有我们自己穿件的代码片段文件，同时也可以新建

编辑器会给我们创建一个空的文件

然写上我们自己的片段

// vue
{
	"Print to console": {
	  "prefix": "vue",
	  "body": [
		"<template>",
		"  <div class=''>\n",
		"  </div>",
		"</template>\n",
		"<script>",
		"import {mapState,mapGetters,mapMutations} from 'vuex';",
		"export default {",
		"  data() {",
		"    return {\n",
		"    }",
		"  },",
		"  props:[],",
		"  methods:{ ...mapMutations([])},\n",
		"  created(){},",
		"  mounted(){},",
		"  watch:{},",
		"  computed:{ ...mapState({}),\n",
		"  ...mapGetters([])\n",
		"  },",
		"  components: {\n",
		"  }",
		"}",
		"</script>\n",
		"<style lang='less'>\n",
		"</style>",
		"$2"
	  ],
	  "description": "创建一个自定义的vue组件代码块"
	}
}

// vite
{
	"Print to console": {
            "prefix": "vite",
            "body": [
              "<template>",
              "  <div class=''>\n",
              "  </div>",
              "</template>\n",
              "<script>",
              "import {useStore} from 'vuex';",
              "import {useRouter} from 'vue-router';",
              "import {onMounted, ref, reactive, watch, computed} from 'vue';",
              "export default {",
              "  setup(props) {",
              "    return {\n",
              "    }",
              "  },",
              "  components: {\n",
              "  }",
              "}",
              "</script>\n",
              "<style lang='less' scoped>\n",
              "</style>",
              "$2"
            ],
            "description": "创建一个自定义的vue组件vite代码块"
       }
}

保存，最后我们就可以使用了

生成代码如下：

<template>
  <div class=''>

  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations} from 'vuex';
export default {
  data() {
    return {

    }
  },
  props:[],
  methods:{ ...mapMutations([])},

  created(){},
  mounted(){},
  watch:{},
  computed:{ ...mapState({}),

  ...mapGetters([])

  },
  components: {

  }
}
</script>

<style lang='less'>

</style>