如何在VS Code中自定义多个代码片段？求新增示例演示

没问题！在VS Code里给Angular项目添加更多angular2-logger相关的代码片段超简单，本质就是在同一个代码片段JSON文件里扩展新的片段对象就行。我给你一步步说明，再附上实用的示例：

第一步：打开代码片段配置文件 #

按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）调出命令面板，输入Configure User Snippets，然后选择你要添加片段的目标（比如选typescript.json，因为Angular组件用的是TS；如果想全局生效就选global.code-snippets）。

第二步：扩展你的代码片段 #

打开文件后，你只需要在现有"angular2-logger"片段的后面，添加新的片段对象就行——每个片段的结构和你现有的完全一致，包含prefix（触发前缀）、body（代码内容）、description（描述）三个核心字段。

完整示例：扩展多种日志类型 #

这里我给你扩展了常用的警告、错误、调试日志，还有带组件名称、打印对象的实用片段：

{
  "angular2-logger": {
    "prefix": "log",
    "body": [
      "this.log.log('$1');"
    ],
    "description": "使用angular2-logger的log基础日志功能"
  },
  "angular2-logger-warn": {
    "prefix": "logw",
    "body": [
      "this.log.warn('$1');"
    ],
    "description": "使用angular2-logger的warn警告日志功能"
  },
  "angular2-logger-error": {
    "prefix": "loge",
    "body": [
      "this.log.error('$1');"
    ],
    "description": "使用angular2-logger的error错误日志功能"
  },
  "angular2-logger-debug": {
    "prefix": "logd",
    "body": [
      "this.log.debug('$1');"
    ],
    "description": "使用angular2-logger的debug调试日志功能"
  },
  "angular2-logger-with-component": {
    "prefix": "logc",
    "body": [
      "this.log.log('[${TM_FILENAME_BASE}] $1');"
    ],
    "description": "打印带当前组件名称的日志（自动获取文件名，比如`user.component.ts`会变成`user.component`）"
  },
  "angular2-logger-object": {
    "prefix": "logobj",
    "body": [
      "this.log.log('$1:', $2);"
    ],
    "description": "打印变量/对象，带自定义描述文本（输入后按Tab切换到变量位置）"
  }
}

小提示 #

• 注意JSON语法：每个片段之间用逗号分隔，最后一个片段后面不要加逗号，否则会报错。
• $1、$2是光标占位符：输入触发前缀后，光标会自动定位在$1的位置，按Tab可以切换到下一个占位符$2，非常高效。
• 保存文件后立刻生效：不需要重启VS Code，直接在TS文件里输入对应的前缀（比如logw）就能看到新的代码片段提示啦～

内容的提问来源于stack exchange，提问作者Eve-Sama