VS Code Extension

What is a VS Code Extension?

A VS Code Extension is a small program that adds new features or enhances existing functionality in Visual Studio Code. Extensions allow developers to tailor the editor to their needs by adding support for new languages, tools, themes, debuggers, commands, and integrations.

VS Code extensions can help you:

• Add language support (syntax highlighting, IntelliSense)
• Create custom commands in the Command Palette
• Automate repetitive development tasks
• Integrate external tools and services
• Improve productivity with formatting, linting, and debugging tools

Extensions are published and distributed through the Visual Studio Marketplace, where users can easily install and update them directly from VS Code .

At a high level, a VS Code extension:

• Runs on Node.js
• Is written in JavaScript or TypeScript
• Uses the VS Code Extension API to interact with the editor .

 

How to Create a VS Code Extension (Step-by-Step)

Let’s walk through creating a simple Hello World VS Code extension using the official tooling provided by Microsoft.

Step 1: Prerequisites

Before you begin, make sure you have the following installed:

• Node.js (required to run and build extensions)
• npm (comes with Node.js)
• Git (recommended for source control)
• Visual Studio Code

VS Code extensions are built on Node.js and TypeScript/JavaScript, so Node.js is mandatory.

Step 2: Install Yeoman and the VS Code Extension Generator

Microsoft provides an official Yeoman generator to scaffold VS Code extensions quickly.

Run the following command in your terminal:

npm install -g yo generator-code

This installs:

• Yeoman (yo) – a project scaffolding tool
• generator-code – the VS Code extension generator.

Step 3: Scaffold a New Extension

Create a new extension project by running:

yo code

You’ll be prompted with a few questions:

• Type of extension → New Extension (TypeScript or JavaScript)
• Extension name
• Identifier
• Description
• Package manager (npm recommended)

After answering these, Yeoman will generate a ready-to-use extension project structure.

Step 4: Understand the Project Structure

A typical generated extension contains:

• package.json – Extension metadata, commands, and contributions
• src/extension.ts or extension.js – Main extension logic
• .vscode/launch.json – Debug configuration
• README.md – Documentation

The package.json file tells VS Code:

• What your extension contributes (commands, menus, settings)
• Which VS Code versions it supports

The extension.ts file contains the code that runs when your extension is activated.

Step 5: Run and Test the Extension

To test your extension:

1. Open the extension project in VS Code
2. Press F5 (Start Debugging)
3. A new Extension Development Host window opens
4. Open the Command Palette (Ctrl+Shift+P)
5. Run your extension command (e.g., Hello World)

You should see a notification message, confirming your extension is working.

Step 6: Modify the Extension

You can now customize the extension behavior by editing extension.ts:

• Change the message shown to users
• Register new commands
• Use VS Code APIs (notifications, input boxes, file access)

After making changes:

• Reload the Extension Development Host
• Re-run the command to see updates

VS Code provides built-in debugging tools to set breakpoints and inspect variables during extension execution.

Step 7: Package and Publish (Optional)

To publish your extension to the VS Code Marketplace:

1. Install the VS Code Extension CLI:  

   npm install -g vsce
   

2. Create a publisher account
3. Package and publish the extension:

vsce package
vsce publish

 

Use Case

In a recent enterprise infrastructure initiative, there was a recurring need to generate Terraform code for CPF modules in strict alignment with project reference guidelines and approved module templates. Although these modules were centrally maintained in a project repository, manual consumption required engineers to repeatedly search across repositories, interpret module definitions, and assemble boilerplate code. To reduce this overhead and improve consistency, a custom Visual Studio Code extension was implemented to automate Terraform scaffolding while ensuring the generated output remained compliant with project standards. 

A key constraint for this solution was that MCP (or any managed AI orchestration platform) could not be used. Accordingly, the design was implemented entirely within the VS Code extension boundary, with deterministic control points to preserve auditability. The extension integrates with the repository through its APIs to fetch the latest module templates and then extracts relevant module metadata—such as variables, outputs, and structural requirements - to drive generation decisions. This ensured the extension was not dependent on static local templates and could remain aligned with repository-driven evolution of CPF modules. 

For the Terraform code generator portion specifically, GitHub Copilot was incorporated to assist with producing the final Terraform configuration content efficiently. In this model, Copilot supports rapid iteration and contextual code generation within the developer workflow, while the VS Code extension continues to act as the governing layer that constrains and validates what gets generated (for example, enforcing module selection rules, naming conventions, and approved file structure). This mirrors the broader pattern where Copilot enhances developer experience and productivity in the IDE without replacing deterministic guardrails. 

The overall result is an editor-native workflow that balances productivity and compliance: repository APIs provide the authoritative source of module templates; deterministic parsing and guideline enforcement provide consistency and repeatability; and GitHub Copilot accelerates the code authoring experience for Terraform files. This demonstrates that meaningful Infrastructure-as-Code automation can be delivered under strict platform constraints, while still leveraging AI-assisted development responsibly within controlled boundaries.

End to end Flow

1. Start
   • User launches the VS Code extension.

1. Resource & Source Selection
   • User selects resource types and chooses a source (GitLab or JFrog).

1. Source Choice Branching
   • GitLab Path:
     • Fetch projects
     • Filter and rank modules
   • JFrog Path:
     • Fetch artifacts
     • Filter and rank modules

1. Ranked Module List
   • Consolidated ranked modules displayed to the user.
2. User Selection
   • User selects modules to deploy.

1. Download/Clone Modules
   • Clone Git repositories or download artifacts.
   • Extract to workspace.

1. Terraform Parser
   • Parse .tf files for:
     • locals
     • module calls
     • required_providers
     • provider blocks
     • backend configuration
2. Metadata Assembly
   • Aggregate:
     • module_info
     • example_values (locals, module_calls, providers, backend)
3. Output Generation
   • Save Module JSON:
     • Separate files for GitLab and JFrog.
   • Generate Prompt:
     • Initialize prompt-for-Iac.md
     • Append module metadata.

1. AI-Assisted IaC Generation
   • Use prompt to generate Terraform files:
     • main.tf
     • providers.tf
     • variables.tf
     • outputs.tf
2. Deployable Terraform Code
   • Ready for:
     • terraform init
     • terraform plan
     • terraform apply

1. End
   • User to review that code and replace the values (if required).