如何使用VisualStudioCode调试AngularSchematic在代码执行时调试和遍历代码的能力是我们开发工作流程的基础。这是一项基本功能，使我们能够调试和确定代码在做什么。它可以成为我们测试工作流程的一部分——附加调试器并在特定场景中执行测试。调试还提供了了解代码（我们没有实现）如何工作的机会。原理图当然就是这种情况。作为Angular开发人员，我们在使用AngularCLI时肯定每天都会使用原理图。我们使用CLI来创建新的工作区、项目、服务、组件、模块、类等——我们很少考虑幕后发生的事情。然而，了解原理图的工作原理可以让我们欣赏为我们提供如此多用途的工具。但它也有助于学习如何创建我们自己的原理图。当您运行/执行Schematic时，您正在运行一个节点程序。我们运行的具体程序就是原理图。因此，首先，我们需要一个原理图项目。工具和先决条件在我们使用schema-cli创建原理图项目之前，我们需要确保以下包在我们的开发环境中可用。使用-g安装以下软件包，使它们在全球范围内可用。npminstall-g@angular-devkit/schematicsnpminstall-g@angular-devkit/schematics-cli这个工具允许我们使用原理图集合创建新的原理图项目。在终端中运行schematics命令。输出是命令的选项列表。使用集合中的原理图项创建包含(3)个原理图的示例原理图集合-这些示例将帮助我们熟悉原理图的工作原理。schematicsschematic--name=schematics-debugged自动创建了三个文件夹：我们的新schematics项目是(3)schematics的集合。示例项目中的每个(3)原理图都演示了原理图可以做什么以及它们如何协同工作的各种功能（可组合原理图）。本文不会详细介绍这些原理图-它将重点介绍仅用于调试的环境设置。您现在有了一个新的原理图项目。您可以使用以下命令构建和测试项目：npmrunbuildnpmruntest开始调试如前所述，当我们执行schematics命令时，我们正在执行一个Node.js程序并传递一些参数。在本例中，它是一个Schematics程序。参数包括具体的原理图项名称和我们要传入的任何其他选项。为项目创建一个新的launch.json配置。要添加的配置类型是node.js-启动程序。选择这个特定配置进行调试时，我们需要针对Node.js程序。在本例中，它是schemas.js（来自@angular-devkit/schematics-cli包）。我们想要的程序是包的bin文件夹中的一个Javascript文件。通过在我的项目中本地安装@angular-devkit/schematics-cli包，我简化了对该程序的访问。启动配置的程序属性要求文件是程序或Javascript文件位置的完整路径。使用${workspaceFolder}提供工作区/项目文件夹的完整路径。npminstall-D@angular-devkit/schematics-cli执行后，package.json中新增内容："@angular-devkit/schematics-cli":"^12.2.10"，我的launch.json文件的内容如下：{//使用IntelliSense了解可能的属性。//悬停以查看现有属性的描述。//更多信息，请访问：https://go.microsoft.com/fwlink/?linkid=830387"version":"0.2.0","configurations":[{"type":"node","request":"launch","name":"LaunchProgramforSchematics","args":[".:my-other-schematic","--name=hello"],"program":"${workspaceFolder}/node_modules/@angular-devkit/schematics-cli/bin/schematics.js","outFiles":[]}]}args：在args数组中单独添加每个参数。因为我们已经在项目的根目录中（package.json有一个指向collection.json文件的schemas属性）。如下图所示：如果原理图的路径不同（即如果使用工作区），则可能需要修改参数。outFiles：使用空[]添加此属性。最后按f5开始调试：更多Jerry原创文章在这里：《王子熙》：
