构建 Visual Studio Code 扩展以从模板生成文件

项目： CFFT - 从模板创建文件 - Visual Studio Code 扩展

去年，我在Dev.to上发表了一篇博文，题为“让我们创建一个 Node CLI，从模板生成文件！”。在文中，我详细介绍了如何创建一个 Node.js CLI 工具，帮助开发人员基于可自定义的模板生成文件结构。作为一名开发人员，这个工具为我节省了无数处理重复性任务的时间。

这一次，我迈出了下一步——将该项目扩展为 Visual Studio Code 扩展，建立在相同基础上，但将该功能直接带入 VS Code 界面。

在这篇文章中，我将介绍：

CFFT 是什么以及如何使用它，
如何开始使用 Visual Studio Code 扩展，
构建 CLI 工具和 VS Code 扩展时的代码组织技巧，
如何发布您的扩展以供其他人使用。

什么是 CFFT 以及如何使用它

CFFT（从模板创建文件）是一个 Visual Studio Code 扩展，可以简化文件生成。如果您使用任何缺少官方 CLI 的库、框架或编程语言，CFFT 可以带来颠覆性的变化，通过自动执行重复性任务来节省您的时间和精力。

作为一名 React/Next.js 开发者，我经常发现自己需要反复创建相同的文件夹和文件结构。这就是我最初构建 CFFT CLI 的原因。这个新扩展为 VS Code 带来了同样的功能，让你只需在资源管理器窗格中右键单击即可生成文件。

现在，您无需在终端中运行命令，而是可以直接从 VS Code 界面生成文件，从而使流程更加简化。

要了解有关扩展的更多信息或安装它，请访问Visual Studio Marketplace。

构建您的第一个 VS Code 扩展

构建 VS Code 扩展并不像看起来那么复杂，尤其是如果你已经熟悉 JavaScript 或 TypeScript 的话。就我而言，我能够重用原始 CFFT CLI 项目中的很多逻辑。在一个阳光明媚的下午，我灵光一闪，便开始着手实践。

计划

与任何项目一样，规划至关重要。它可以最大限度地减少反复试验，并为实施制定清晰的路线图。以下是我的做法：

决定如何重用现有的 CLI 代码。
创建 Visual Studio Code 扩展项目（研究文档并设置基础知识）。
实现一个基于模板生成文件的命令。
将此命令添加到上下文菜单，右键单击目录时可用。

重用 CLI 代码

代码可复用性是开发人员最好的朋友。我想最大限度地利用 CFFT 扩展的可复用性，因此决定创建一个新的基础包：@beezydev/create-files-from-template-base。这使得我能够在 CLI 工具和 VS Code 扩展之间复用共享代码，而无需重复劳动。

将此共享逻辑发布为 NPM 包意味着两个项目都可以轻松导入和使用它：



"dependencies": {
    "@beezydev/create-files-from-template-base": "^1.5.14"
  }



import { createAllDirectoriesAndFilesFromTemplate } from "@beezydev/create-files-from-template-base/files";

有关发布 NPM 包的更多详细信息，请参见此处。

创建 VS Code 扩展

在深入研究之前，我先熟悉了官方的 VS Code 扩展文档。我建议从他们的《你的第一个扩展》指南开始。

为了启动该项目，我使用了以下命令：



npx --package yo --package generator-code -- yo code

这款 Yeoman 生成器可帮助您搭建新的 VS Code 扩展。只需回答一些设置问题（例如，是否使用 TypeScript、eslint 等），即可获得一个可供使用的基本结构。

创建命令

扩展程序的主要功能在此文件中定义extension.ts。以下示例展示了如何注册一个命令，当用户想要从模板生成文件时会触发该命令：



import * as vscode from "vscode";

export function activate(context: vscode.ExtensionContext) {
  const cfftExecuteCommand = vscode.commands.registerCommand(
    "cfft.newFileFromTemplate", // the command name
    async (uri: vscode.Uri) => { // the callback
      // Your code goes here
    }
  );

  context.subscriptions.push(cfftExecuteCommand);
}

确保您还在以下位置注册了该命令package.json：



"contributes": {
    "commands": [
      {
        "command": "cfft.newFileFromTemplate",
        "title": "New From Template... (CFFT)"
      }
    ]
}

这将注册该命令，您现在可以通过命令面板或将其添加到上下文菜单来调用该命令。

添加到上下文菜单

我希望在文件夹上右键点击时，可以在“新建文件…”和“新建文件夹…”选项之后直接访问该命令。为了实现这一点，我修改了以下内容package.json：



"contributes": {
    "commands": [
      {
        "command": "cfft.newFileFromTemplate",
        "title": "New From Template... (CFFT)"
      }
    ],
    "menus": {
      "explorer/context": [
        {
          "command": "cfft.newFileFromTemplate",
          "when": "explorerResourceIsFolder",
          "group": "navigation@9"
        }
      ]
    }
  }