1分钟教你在vscode快速生成代码块code-snippets

前言

在编写大量 Vue 组件时，我们总是要重复编写这样的语法：

<script lang="ts">

const props = withDefaults(defineProps<{
  prop1?: string;
}>(), {
  prop1: '',
});

const emit = defineEmits<{
  (event: 'event1'): void;
}>();

</script>

<template>
  <div>content</div>
</template>

<style scoped lang="scss">

</style>

重复编写这些模板化内容没有任何意义，而且有时忘记了写法还需要到其他文件中搜索，容易让人产生厌烦情绪而效率低下。

第一步

我们可以在项目根目录下建立 .vscode 目录，.vscode代表的项目级的vscode编辑设置项，其中的配置文件只会在本项目下生效。

第二步

在.vscode中添加名为：vue.code-snippets 的文件，文件中可以定义如下代码（可以根据自己的需求更改）：

{
  "Vue Tsx Template": {
// 代码块搜索前缀vtsx
    "prefix": "vtsx",
    "body": [
      "import {ref,reactive,defineComponent} from \"vue\"",
      "export default defineComponent({",
      " setup(props,{slots,emit}){",
      "  return ()=><div></div>",
      "}",
      "})"
    ],
    "description": ""
  },
 "Vue SFC Template": {
    // 代码块搜索前缀sfc
    "prefix": "sfc",
    "body": [
      "<script setup lang=\"${1:ts}\">",
      "import { ref } from 'vue'",
      "</script>",
      "",
      "<template>",
      "  <div>${3:contents}</div>",
      "</template>",
      "",
      "<style scoped lang=\"${4:scss}\">",
      "</style>"
    ],
    "description": "初始化 vue3 SFC 模板"
  },
}

代码中定义了两个搜索前缀sfc、vtsx，在vscode中的使用效果：

最后如果觉得这些代码块不知道如何写，可以借助一款自动生成代码块的工具 snippet generator ,可以更快得完成这个过程。