VsCode添加快捷代码片段

VsCode中支持我们可以通过自定义属性实现快速创建代码片段，可以帮助我们快速完成重复性模块化代码的快捷创建，提升开发速度和降低手写代码可能出现的低级错误问题。下面我来简单介绍下如何实现本地代码片段的创建。

新建代码片段

VsCode中的项目会自动生成一个.vscode文件夹，用于保存当前的项目的配置。.vscode文件夹的文件类型如下：

• extensions.json：当前项目的插件使用配置
• settings.json：项目内的编辑器和插件配置，可以覆盖全局settings.json配置
• launch.json：调试配置文件
• task.json：任务配置文件，可以直接被vscode读取生成快捷执行，package.json中的scripts也可直接被读取
• *.code-snippets：这个就是代码片段的配置，我们可以通过创建.code-snippets后缀的代码片段来帮助我们实现代码的快捷生成

比如我们创建一个vue-template.code-snippets文件，如下：

// .vscode/vue-template.code-snippets
{
    "vue-quik": {   // 片段名称
      "prefix": "vue-template",  // 快捷指令名
      "body": [                  // 一键生成的代码片段
        "<script setup lang=\"ts\">", 
        "</script>",
        "",
        "<template>",
        "  <div></div>",
        "</template>",
        ""
      ],
      "description": "vue-template 代码片段"  // 代码描述
    }
  }
  

代码片段使用

代码片段的使用比较简单，我们可以通过在文件中输入指令名vscode后侧会给出提示，我们选中对应的指令直接一键生成就可以了，如下：

如上，左侧匹配的是快捷指令，右侧显示的代码片段的名称vue-quick，左侧的方框图标标识代码片段，一定要选中方框图标的。生成如下：