Dušan

Posted on Sep 8 • Updated on Sep 9

Building a Visual Studio Code Extension to Generate Files from Templates

#vscode #node #javascript

Project: CFFT - Create Files From Template - Visual Studio Code Extension

Last year, I published a blog post on Dev.to titled "Let’s create a Node CLI for generating files from templates!". In it, I detailed how to create a Node.js CLI tool to help developers generate file structures based on customizable templates. This tool saved me countless hours as a developer working with repetitive tasks.

This time, I’ve taken the next step—extending that project into a Visual Studio Code extension, built on the same foundation, but bringing that power directly into the VS Code interface.

In this post, I’ll cover:

What CFFT is and how to use it,
How to get started with Visual Studio Code extensions,
Tips on code organization when building both CLI tools and VS Code extensions,
How to publish your extension for others to use.

What is CFFT and How to Use it

CFFT (Create Files From Template) is a Visual Studio Code extension that simplifies file generation. If you work with any library, framework, or programming language that lacks an official CLI, CFFT can be a game-changer, saving you time and effort by automating repetitive tasks.

As a React/Next.js developer, I often found myself recreating the same folder and file structures repeatedly. That’s why I originally built the CFFT CLI. This new extension brings the same functionality to VS Code, allowing you to generate files with just a right-click inside the Explorer pane.

Instead of running a command in the terminal, now you can generate files directly from the VS Code interface—making the process even more streamlined.

To learn more about the extension or install it, visit the Visual Studio Marketplace.

Build Your First VS Code Extension

Building a VS Code extension isn’t as complex as it might seem, especially if you’re already familiar with JavaScript or TypeScript. In my case, I was able to reuse a lot of the logic from the original CFFT CLI project. On a sunny afternoon, the idea clicked, and I got to work.

The Plan

As with any project, planning is key. It minimizes trial-and-error and sets a clear roadmap for implementation. Here’s how I approached it:

Decide how to reuse the existing CLI code.
Create the Visual Studio Code extension project (research the docs, and set up the basics).
Implement a command to generate files based on a template.
Add this command to the context menu, available when right-clicking on directories.

Reusing the CLI Code

Code reusability is a developer’s best friend. I wanted to maximize this for the CFFT extension, so I decided to create a new base package: @beezydev/create-files-from-template-base. This allowed me to reuse shared code between the CLI tool and the VS Code extension, without duplicating effort.

Publishing this shared logic as an NPM package meant that both projects could easily import and use it:

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

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

More details on publishing NPM packages can be found here.

Creating the VS Code Extension

Before diving in, I familiarized myself with the official VS Code extension documentation. I recommend starting with their guide on Your First Extension.

To kick off the project, I used the following command:

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

This Yeoman generator helps scaffold a new VS Code extension. After answering some setup questions (e.g., whether to use TypeScript, eslint, etc.), you’ll have a basic structure ready to go.

Creating the Command

The main functionality of your extension is defined in the extension.ts file. Here’s an example of how to register a command that gets triggered when users want to generate files from a template:

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);
}

Make sure you also register the command in package.json:

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

This registers the command, which you can now call via the command palette or by adding it to a context menu.

Adding to the Context Menu

I wanted to make the command accessible when right-clicking on a folder, just after the “New File…” and “New Folder…” options. To achieve this, I modified the package.json:

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

This configuration ensures the command only appears when the user right-clicks on a folder in the Explorer pane.

Publishing the Extension

Once your extension is ready, the final step is making it available to the world. Fortunately, publishing is straightforward thanks to VS Code’s extension publishing guide.

Start by creating a solid README.md to explain how to use your extension. You’ll also need to ensure that your package.json includes the necessary fields:

name - The extension’s name,
displayName - How it appears in the marketplace,

description - A brief explanation of what it does,

icon - path to the icon. I created the images folder and uploaded the icon there.

publisher - Your publisher ID. See the docs to find out how to get it. In my case, it's my name:

version - Current version,
categories - Help users find your extension:

repository - the link to the repository - if you want to expose your code,
keywords - Tags that improve discoverability:

See more in package.json.

Conclusion

Creating a VS Code extension is a rewarding experience, especially when you build something like CFFT that saves time for developers. As time is our most valuable resource, tools like this are invaluable. I hope this post helps you in your own journey of building extensions or automating workflows.

Thank you for reading!