RPDI
Back to Blog

How to Build a VS Code Extension That Reads Open Files: From Zero to Marketplace

TL;DR

This tutorial covers the complete lifecycle of building a VS Code extension that reads open files: project scaffolding with Yeoman, TypeScript configuration, VS Code API integration for file reading, output channel logging, command palette registration, VSIX packaging, and Marketplace publishing. The final extension reads all open file contents and exposes them via a command — the foundation for any AI context integration.

Project Setup

Start with the official scaffolder:

// Step 1: Scaffold

npx -y yo generator-code

→ Choose: New Extension (TypeScript)

→ Name: file-context-reader

→ Enable bundling: Yes (use esbuild)

// Step 2: Add activation events

// In package.json:

"activationEvents": ["onStartupFinished"]

Using onStartupFinished ensures the extension activates after VS Code is fully loaded, giving you access to all already-open tabs.

The Core Implementation

The implementation follows four steps from scaffolding to shipping:

Step 01

Read All Open Files

Use window.tabGroups.all to enumerate tabs, filter for TabInputText, and read each file's content via workspace.openTextDocument(uri). The result is an array of {path, content, language} objects representing every open file.

Step 02

Create an Output Channel

Use vscode.window.createOutputChannel('File Context') to create a dedicated output panel. Log file contents here for debugging. This is also where you can display the assembled context for inspection.

Step 03

Register a Command

Register a command (file-context-reader.showContext) that triggers context assembly and displays it in the output channel. Add it to package.json contributes.commands. The developer can invoke it from the Command Palette.

Step 04

Package and Publish

Run 'npx -y @vscode/vsce package' to create a VSIX file. Run 'npx -y @vscode/vsce publish' with a Personal Access Token to push to the VS Code Marketplace. The extension is now installable by any developer.

From Extension to Context Engine

The extension you just built reads files. A context engine goes further: it resolves imports, packages context as structured JSON, serves it via MCP, and auto-refreshes on every state change. The extension is the sensor; the context engine is the brain.

Metric4xTHE COMPLEXITY DIFFERENCE BETWEEN 'READS FILES' AND 'PRODUCTION CONTEXT ENGINE'

The extension from this tutorial: ~200 lines, reads open files, outputs to channel. A production context engine: ~8,000 lines across Rust + TypeScript, resolves import graphs, packages structured JSON, serves MCP, handles errors, auto-updates, scans dependencies. The extension is a proof of concept. The engine is a product. The gap between them is 4-6 months of full-time engineering.

Build the Foundation. Or Use the Engine.

This tutorial gives you the foundation — a working extension that reads open files. Building the full engine (import resolution, MCP serving, security scanning) is a separate, multi-month project. Context Snipe already did that work.

🔧 The production engine. Ready to install.

Context Snipe builds on the same VS Code APIs covered in this tutorial — then adds Rust-powered import resolution, MCP serving, dependency scanning, and auto-update. A 45-minute tutorial becomes a 5-minute install. Start free — no credit card →