步骤如下:

  1. 设置->用户代码片段
    在这里插入图片描述
  2. 新增全局代码片段
    在这里插入图片描述
  3. 起全局代码片段文件名“xxx.code-snippets
    这里以配置vue2初始代码片段为例
    在这里插入图片描述
  4. 配置具体代码片段
    按enter进入文件配置,以下是vue2的代码片段示例,具体可以自己随意配置
{
	"Print to console": {
		"prefix": "vue2",
		"body": [
			"<template>",
			"  <div>",
			"",
			"  </div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"  data() {",
			"    return {",
			"",
			"    }",
			"  },",
			"  created() {",
			"",
			"  },",
			"  mounted() {",
			"",
			"  },",
			"  methods: {",
			"",
			"  },",
			"}",
			"</script>",
			"<style scoped lang='scss'>",
			"",
			"</style>"
		],
		"description": "Log output to console"
	}
}
  1. 使用
    新建一个vue文件,开始输入vue,vscode会有提示的
    在这里插入图片描述
    在这里插入图片描述
    这就ok拉

下面在赠送一波vue3的代码片段吧

{
  "Print to console": {
    "prefix": "vue3",
    "body": [
      "<template>",
      "  <div $1></div>",
      "</template>",
      "",
      "<script setup>",
      "import { ref, onMounted } from 'vue';",
      "import { useRoute, useRouter } from 'vue-router';",
      "const route = useRoute();",
      "const router = useRouter();",
      "onMounted(() => {",
      "  //console.log('3.-组件挂载到页面之后执行-------onMounted')",
      "})",
      "</script>",
      "<style scoped lang='scss'>",
      "</style>"
    ],
    "description": "Log output to console"
  }
}

Logo

汇聚全球AI编程工具,助力开发者即刻编程。

更多推荐