VsCode通过snippet generator生成自定义代码片段

1.背景

用vscode写项目时候,经常会建一些初始内容一模一样的文件，比如vue文件。内容大致如下:

<template>
  <div class="login">
    <h2>login</h2>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="less" scoped></style>

但不可能每次新建文件都自己输入这样子的内容或者不可能每次都粘贴复制。我们希望能生成并且配置代码片段,然后用某些快捷单词就能自动补全模版。

2.解决方法

进入https://snippet-generator.app/。

在description里面输入一些描述，tab trigger中输入一些快捷单词，并且将相应的代码输入进去。

复制右侧内容后，进入vscode，文件=>首选项=>配置代码片段，搜索vue.json：

在对象中追加刚刚复制的内容:

然后随便新建一个vue文件，输入tsvue，会自动补全相关模板。

然后把相关内容改为相应的内容即可: