如何在vscode中生成代码模版(以及如何与项目一一绑定)

云风春黛

已于 2024-05-13 16:11:10 修改

阅读量346

点赞数 7

文章标签： vscode ide 编辑器

于 2024-05-13 16:05:31 首次发布

本文链接：https://blog.youkuaiyun.com/h1606641309/article/details/138806730

版权

由于vue每次新开一个文件都需要重新建立一个模版，虽然我们可以是使用第三方工具进行指令生成，但是生成后还是需要我们在进行手动修改，还是有点用起来不是很舒服。

那么我们该如何生成自己的代码模版呢，下面给出配置在vscode上面的方法

进去后将其复制进去

{
  "Vue 3 Setup": {
  	"prefix": "vue3-setup",
  	"body": [
  		"<template>",
  		"  <div>",
  		"    $10",
  		"  </div>",
  		"</template>",
  		"",
  		"<script setup lang=''>",
  		"import { ref, reactive, computed, onMounted, onUpdated, defineProps , defineEmits , onUnmounted, getCurrentInstance } from 'vue'",
  		"",
  		"const { proxy } = getCurrentInstance();",
  		"",
      "const emit = defineEmits();",
      "",
      "const props = defineProps({});",
      "",
  		"// Reactive data",
  		"const state = reactive({",
  		"  $1",
  		"})",
  		"",
  		"// Ref data",
  		"const data = ref(null)",
  		"",
  		"// Computed properties",
  		"const com = computed(() => {",
  		"  $4",
  		"})",
  		"",
  		"// Lifecycle hooks",
  		"onMounted(() => {",
  		"  $5",
  		"})",
  		"",
  		"onUpdated(() => {",
  		"  $6",
  		"})",
  		"",
  		"onUnmounted(() => {",
  		"  $7",
  		"})",
  		"",
  		"// Methods",
  		"const fun = () => {",
  		"  $9",
  		"}",
  		"</script>",
      "",
      "<style lang='less' scoped>",
  		"</style>",
  	],
  	"description": "Vue 3 Setup Template"
  }
}