如何创建可插入代码并修改文件导入语句的Angular代码片段？

问题描述 #

我编写了如下VS Code Angular生命周期钩子代码片段：

"Angular Lifecycle Hooks": {
 "prefix": "nglifecycle",
 "body": [
    "ngOnChanges() {",
    "\t// called before any bindings are made and before ngOnInit()",
    "\t// Here you can access the change detection results, and make any updates you want.",
    "\tconsole.log('ngOnChanges');",
    "}",
    "",
    "ngOnInit() {",
    "\t// called once after the first ngOnChanges()",
    "\tconsole.log('ngOnInit');",
    "}",
    ""
  ],

 "description": "Angular Lifecycle Hooks Snippet"
}

希望使用该片段时，既能在文件指定位置（如第15行）插入上述代码，又能自动将文件头部的import {Component} from '@angular/core'语句修改为import {Component, OnInit, OnChanges} from '@angular/core'（注：原需求中的OnChange应为Angular标准接口OnChanges），请问是否可以实现？

解决方案 #

可以实现，以下是两种可行方案：

方案1：使用VS Code原生高级代码片段功能（需VS Code 1.80及以上版本） #

VS Code 1.80+版本支持代码片段的insertionLocation（指定插入行）和transformations（修改文件内容）特性，直接修改代码片段即可实现需求：

"Angular Lifecycle Hooks": {
  "prefix": "nglifecycle",
  "body": [
    "ngOnChanges() {",
    "\t// called before any bindings are made and before ngOnInit()",
    "\t// Here you can access the change detection results, and make any updates you want.",
    "\tconsole.log('ngOnChanges');",
    "}",
    "",
    "ngOnInit() {",
    "\t// called once after the first ngOnChanges()",
    "\tconsole.log('ngOnInit');",
    "}",
    ""
  ],
  "insertionLocation": "15", // 指定代码插入到第15行
  "transformations": [
    {
      "find": "import {Component} from '@angular/core';",
      "replace": "import {Component, OnInit, OnChanges} from '@angular/core';",
      "matchAll": false
    }
  ],
  "description": "Angular Lifecycle Hooks Snippet"
}

如果导入语句存在格式差异（比如多行书写、已有其他导入项），可以改用正则表达式匹配：

"transformations": [
  {
    "find": "import {Component(?:,\\s*)?} from '@angular/core';",
    "replace": "import {Component, OnInit, OnChanges} from '@angular/core';",
    "matchAll": false
  }
]

方案2：借助VS Code Angular专用扩展 #

如果需要更智能的格式兼容（比如自动识别不同风格的导入语句、处理组件类已实现接口的情况），可以使用Angular专用扩展，例如Angular Snippets (Version 13+)。这类扩展能自动检测并补充缺失的导入接口，同时将钩子代码插入到组件类的指定位置。

内容的提问来源于stack exchange，提问作者M. Almog