DEV Community

Dušan
Dušan

Posted on • Updated on

Building a Visual Studio Code Extension to Generate Files from Templates

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

Create Files From Template Visual Studio Extension

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.

Showing the CFFT option in the VS Code context menu

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:

  1. Decide how to reuse the existing CLI code.
  2. Create the Visual Studio Code extension project (research the docs, and set up the basics).
  3. Implement a command to generate files based on a template.
  4. 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"
  }
Enter fullscreen mode Exit fullscreen mode
import { createAllDirectoriesAndFilesFromTemplate } from "@beezydev/create-files-from-template-base/files";
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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

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

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

CFFT in the 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"
        }
      ]
    }
  }
Enter fullscreen mode Exit fullscreen mode

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,

displayName

  • description - A brief explanation of what it does,

description

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

icon

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

Dusan Stojanovic

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

categories

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

keywords

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!

Top comments (6)

Collapse
 
georgewl profile image
George WL

I love how much depth you went into, not too much, not too little, just the perfect amount

Collapse
 
martinbaun profile image
Martin Baun

Neat approach! Thank you for sharing.

Collapse
 
wizard798 profile image
Wizard

Looks very interesting, gonna give it a shot

Collapse
 
oleh_nazarovych profile image
Oleh Nazarovych

Great article

Collapse
 
afzal_hussain_5aea6884a45 profile image
Afzal Hussain

This gave me ideas though I've delved intp this but now feel afresh. Nice!

Collapse
 
dansasser profile image
dansasser

Nice approach for for when I'm not using the Astro-SSR-SPA