Create Files with VS Code Extension API in TypeScript: A Step-by-Step Guide (2026)

Developing a Visual Studio Code extension can significantly enhance your productivity by automating repetitive tasks. One common requirement is to programmatically create files and write content within the user's workspace. This tutorial will guide you through using the VS Code Extension API to create files and manage content efficiently, ensuring immediate updates in the VS Code Explorer.

Key Takeaways

• Learn how to use the VS Code Extension API to create files and write content.
• Understand the advantages of using vscode.workspace.fs over Node's fs.
• Handle common issues like refreshing the Explorer UI.
• Discover best practices for extension development in TypeScript.

By the end of this tutorial, you'll be able to create a simple VS Code extension that can generate files within an open workspace and insert text content. This knowledge will empower you to enhance your extensions with file management capabilities, providing greater value to users.

Prerequisites

• Basic knowledge of TypeScript and Node.js.
• Familiarity with VS Code extension development.
• VS Code installed with the latest version (2026) and Node.js (v18.0.0 or later).

Step 1: Set Up Your Extension Environment

First, ensure you have the necessary tools to develop a VS Code extension. If you haven't already, install the Yeoman and VS Code Extension Generator:

npm install -g yo generator-code

Create a new extension project by running:

yo code

Follow the prompts to set up your extension. Choose TypeScript as the language. Once set up, open the generated folder in VS Code.

Step 2: Create a Command to Trigger File Creation

Open src/extension.ts and add a new command in the activate function. This command will trigger the file creation process.

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    const disposable = vscode.commands.registerCommand('extension.createFile', async () => {
        await createFile('example.txt', 'Hello, VS Code!');
    });
    context.subscriptions.push(disposable);
}

Step 3: Implement the File Creation Function

Define the createFile function using the VS Code API:

async function createFile(fileName: string, content: string) {
    const workspaceFolders = vscode.workspace.workspaceFolders;
    if (!workspaceFolders) {
        vscode.window.showErrorMessage('No workspace folder open.');
        return;
    }

    const folderUri = workspaceFolders[0].uri;
    const fileUri = folderUri.with({ path: `${folderUri.path}/${fileName}` });

    try {
        await vscode.workspace.fs.writeFile(fileUri, Buffer.from(content, 'utf8'));
        vscode.window.showInformationMessage(`File ${fileName} created!`);
    } catch (error) {
        vscode.window.showErrorMessage(`Failed to create file: ${error.message}`);
    }
}

This function checks if a workspace is open, constructs the URI for the new file, and uses vscode.workspace.fs.writeFile to write the file content.

Step 4: Test Your Extension

Launch your extension by pressing F5. This opens a new VS Code window with your extension loaded. Use the command palette (Ctrl+Shift+P or Cmd+Shift+P on macOS) to run "Create File". Check the Explorer to see if the file appears with the specified content.

Common Errors/Troubleshooting

• Workspace Not Open: Ensure you have a workspace folder open when running the command.
• File Not Visible: If the file doesn't appear, try refreshing the Explorer or restarting VS Code.
• Permission Errors: Verify you have write permissions for the workspace directory.

Frequently Asked Questions

Why use vscode.workspace.fs instead of Node's fs?

The VS Code API ensures immediate UI updates and handles platform-specific file operations seamlessly.

Can I create files in subdirectories?

Yes, modify the fileUri path to include subdirectories.

How do I handle binary file creation?

Use a Uint8Array instead of a string buffer to write binary data.

Frequently Asked Questions

Why use vscode.workspace.fs instead of Node's fs?

The VS Code API ensures immediate UI updates and handles platform-specific file operations seamlessly.

Can I create files in subdirectories?

Yes, modify the fileUri path to include subdirectories.

How do I handle binary file creation?

Use a Uint8Array instead of a string buffer to write binary data.