ZenML VS Code Tutorial Extension - Developer Guide

Development repository for contributors working on the ZenML VSCode Tutorial Extension.

🚀 Quick Start

Prerequisites

• Node.js
• VS Code
• Docker
• Dev Containers Extension

Setup

1. Clone & install:

   git clone https://github.com/zenml-io/vscode-tutorial-extension
   cd vscode-tutorial-extension
   npm install && npm run compile

2. Open in VS Code and reopen in dev container when prompted

3. Test the extension: Press F5 or use Run and Debug panel → "Run Extension"

⚠️ Important: Always run in dev container - the extension expects this environment.

🛠️ Development Workflow

Making Changes

The extension runs in two places:

• Development (this repo)
• User-facing (vscode-tutorial repo)

After making changes, you need to:

1. Build extension:

   npm run buildExtension:replace

   This packages the extension and updates both repos (requires repos to be side-by-side)

2. Test in user environment: Test changes in both GitHub Codespaces and local dev containers

File Structure

• Extension code: Main TypeScript files
• Tutorial content: pipelines/ directory
• Tutorial structure: tutorialMetadata.json
• Entry point: extension.ts → Tutorial class

Editing Content

Quick text edits:

• Uncomment the "edit text" button in WebView HTML
• Edit markdown files directly
• Save (Cmd+S) → Reload extension (Cmd+R)

Adding/reorganizing steps:

• Edit tutorialMetadata.json
• Each section has steps with optional doc (markdown) and code (Python) files

🐳 Docker Image

The user-facing repository uses a pre-built Docker image for faster startup.

To update the image:

1. Switch to docker-image-build branch
2. Build and push following Docker's guide
3. Update devcontainer.json to reference new image: "image": "zenml/tutorial:latest"

📚 Resources

• ZenML Documentation
• VS Code Extension API