vscode自定义模版 快捷输入

328 阅读2分钟

背景

在工作中,我们经常需要编写重复的初始化模版。而vscode提供了快速新建模版的能力,并支持在工作区进行自定义。这使得可以大大提高我们的工作效率

创建模版

新建 ‘代码片段’ 文件

在vscode中,选择 文件 → 首选项 → 用户片段

然后可以选择 新建全局代码片段文件 或者 新建'XXX'文件夹的代码片段文件 这两者的区别是,一个为注入到全局,一个只存在当前工作区

编写自定义模版

新建完代码片段文件之后,会有一大段注释,其中就有示例样板 image.png

简单的解释下示例样板各个字段

"Print to console": {
    "scope": "javascript,typescript",
    "prefix": "log",
    "body": [
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
}
  1. 其中 Print to console 只是该模版的名字,可以任意命名,对后续快捷输入没有影响
  2. scope字段:该字段为限定模版生效范围,如果没填写即为所有类型语言都生效
  3. prefix:该字段为快捷关键字,即在文件内完整键入该字段时,才会提示新建模版
  4. body:该字段为模版内容,书写的内容需要用双引号包裹。如果双引号包括的代码中也需要双引号,那么需要用转义字符\"转义
  5. description:该字段为当前模版的描述
  6. 模版出现的$1 $2 为新建完模版后的光标聚焦点,可定义多个光标聚焦点

使用自定义模版

至此,你就可以去项目文件里面使用自己编写的自定义模版了,使用方式也是相对比较简单的,直接在文件内完整键入步骤2中填写的prefix字段即会弹出提示,选中即可

至此,一个自定义模版快捷输入就完成了