VScode 添加代码片段

日常的开发过程中，我们都会有一些常用的代码片段，这些代码片段是通用的, 可以直接复制到各个项目中使用，非常方便。下面介绍在vscode快速添加代码片段的方法。

1. 选择所需代码片段

选择需要生成代码片段的代码,以下示例制作演示:

<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-container class="container-box">
        <el-aside width="200px">
          <NavList></NavList>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'

onMounted(() => {})
</script>

<style lang="scss" scoped>
:deep(.el-header) {
  background-color: aqua;
}
:deep(.el-aside) {
  background-color: brown;
}
:deep(.el-main) {
  background-color: lightblue;
}
.container-box {
  height: calc(100vh - 60px);
}
</style>

2. 格式化代码

点击链接,进入片段代码处理工具
网站支持三种编辑器代码处理:

左侧是粘贴代码, 描述可以随意写, tab trigger_写在vscode里面输入的快捷指令, 下侧粘贴代码即可生成右侧所需代码:

3. VSCODE添加

点击vscode 设置 --> 配置用户代码片段 --> 新建全部代码片段文件:

输入框输入 快捷指令名称(上一步骤中所填写的) --> 按enter,出现一下页面, 复制snippet网站工具生成的右侧代码片段, 保存即可;

创建新页面, 直接输入快捷指令,即可生成设置的代码片段。