胖蔡说技术
随便扯扯

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,左侧的方框图标标识代码片段,一定要选中方框图标的。生成如下:

赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » VsCode添加快捷代码片段
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏