WIT IDL for VSCode

A comprehensive Visual Studio Code extension for WebAssembly Interface Type (WIT) development. This extension provides syntax highlighting, validation, formatting, language bindings generation, and WebAssembly component tooling for the WIT Interface Definition Language (IDL). Also compatible as a TextMate bundle.

Key Features:

• 🎨 Full syntax highlighting and code completion
• ✅ Real-time syntax validation with detailed error diagnostics
• 🔧 Automatic code formatting
• 🌐 Generate bindings for Rust, C, C++, C#, Go, MoonBit, and Markdown
• 🧩 WebAssembly component detection and WIT extraction
• 📝 Context menu integration for quick access to tools

The description of the WIT format can be found at: https://github.com/WebAssembly/component-model/blob/main/design/mvp/WIT.md

Features

This extension provides comprehensive support for WebAssembly Interface Type (WIT) files and WebAssembly components:

Language Support

• Syntax Highlighting: Full TextMate grammar for WIT files with proper scoping
• Code Snippets: Pre-built snippets for worlds, interfaces, and common patterns
• Markdown in Comments: Syntax highlighting for markdown within WIT comments
• Code Completion: Context-aware autocomplete for WIT keywords and constructs

Validation and Diagnostics

Automatic Validation

• On File Save: Automatically validates WIT files when saved
• On File Open: Validates WIT files when opened in the editor
• Real-time Feedback: Errors appear immediately in VS Code's PROBLEMS pane
• Workspace Validation: Validate all WIT files across your entire workspace

Error Display

• Precise Location: Errors show exact line and column numbers
• Detailed Messages: Clear descriptions of syntax errors with context
• Quick Navigation: Click any error in PROBLEMS pane to jump to the issue
• Multi-file Support: Track errors across multiple files simultaneously

Document Formatting

Format WIT files with a single command:

• Auto-formatting: Format on save or on demand
• Consistent Style: Ensures uniform code style across your project
• Default Formatter: Automatically set as the default formatter for .wit files
• Keyboard Shortcut: Shift+Alt+F to format the active document

Binding Generation

Generate language bindings directly from WIT files or WebAssembly components:

Supported Languages

• Rust: Generate idiomatic Rust bindings with wit-bindgen
• C: Generate C bindings for C projects
• C++: Generate C++ bindings
• C#: Generate C# bindings for .NET projects
• Go: Generate Go bindings
• MoonBit: Generate MoonBit bindings
• Markdown: Generate documentation in Markdown format

Binding Generation Features

• Context Menu Integration: Right-click on .wit or .wasm files to generate bindings
• Multiple Targets: Generate bindings for multiple languages at once
• Output to Folder: Automatically creates language-specific output directories
• Progress Feedback: Visual feedback during generation process

WebAssembly Component Support

Component Detection

• Visual Indicators: WebAssembly component files (.wasm) are decorated with a 🧩 emoji in the Explorer
• Component Colors: Customizable color scheme for component files in the file explorer
• Automatic Detection: Distinguishes between core WebAssembly modules and components

Component Operations

• Extract WIT: Extract WIT definitions from compiled WebAssembly components
• Extract Core Wasm: Extract the core WebAssembly module from a component
• Custom Editor: View WIT interfaces directly from .wasm component files
• Real-time Updates: WIT view updates automatically when the component file changes

Context Menu Integration

Right-click on files in the editor or Explorer for quick access to:

For .wit files:

• Check WIT Syntax
• Format Document
• Generate Bindings (with language submenu)

For .wasm component files:

• Extract WIT
• Extract Core Wasm
• Generate Bindings (with language submenu)

Available Commands

Access these commands via the Command Palette (Ctrl+Shift+P or Cmd+Shift+P):

Validation Commands

• WIT: Check WIT Syntax (F7 when in a WIT file)

  • Validates the currently active WIT file
  • Shows errors in the PROBLEMS pane and notifications

• WIT: Check WIT Syntax in Workspace (Shift+F7)

  • Validates all WIT files in the workspace
  • Shows progress notification during validation
  • Provides summary of results in output channel

Formatting Commands

• WIT: Format Document (Shift+Alt+F when in a WIT file)
  • Formats the current WIT file
  • Applies consistent styling and indentation

Binding Generation Commands

• WIT: Generate Language Bindings

  • Opens a language selection menu
  • Available for .wit files and WebAssembly components

• WIT: Generate Rust Bindings

  • Generates Rust bindings using wit-bindgen

• WIT: Generate C Bindings

  • Generates C bindings for C projects

• WIT: Generate C++ Bindings

  • Generates C++ bindings

• WIT: Generate C# Bindings

  • Generates C# bindings for .NET projects

• WIT: Generate Go Bindings

  • Generates Go bindings

• WIT: Generate MoonBit Bindings

  • Generates MoonBit bindings

• WIT: Generate Markdown Documentation

  • Generates Markdown documentation from WIT definitions

WebAssembly Component Commands

• WIT: Extract WIT

  • Extracts WIT definitions from a WebAssembly component file
  • Available only for component-type .wasm files

• WIT: Extract Core Wasm

  • Extracts the core WebAssembly module from a component
  • Available only for component-type .wasm files

Utility Commands

• WIT: Show WIT Bindgen Version
  • Displays the version of wit-bindgen used by the extension

Keyboard Shortcuts

Command	Shortcut	When
Check WIT Syntax	F7	Editing a .wit file
Check WIT Syntax in Workspace	Shift+F7	Anytime
Format Document	Shift+Alt+F	Editing a .wit file

Extension Settings

This extension contributes the following settings:

Default Formatter

The extension automatically configures itself as the default formatter for WIT files. This is equivalent to:

{
  "[wit]": {
    "editor.defaultFormatter": "bytecodealliance.wit-idl"
  }
}

You can override this in your user or workspace settings if needed.

Component File Decoration Color

Customize the color used to decorate WebAssembly component files in the Explorer:

• Color ID: witIdl.componentColor
• Description: Color used to decorate WebAssembly component files (.wasm) in the explorer
• Defaults:
  • Light theme: #5043b3
  • Dark theme: #7c5eff
  • High contrast: #b15eff

To customize, add to your settings:

{
  "workbench.colorCustomizations": {
    "witIdl.componentColor": "#your-color-here"
  }
}

Installation

From Marketplace

This extension is available on:

• Visual Studio Marketplace: For VS Code users

  • Install directly from VS Code: Search for "WIT IDL" in the Extensions view
  • Or visit: https://marketplace.visualstudio.com/items?itemName=bytecodealliance.wit-idl

• Open VSX Registry: For VSCodium and other compatible editors

  • Install from Open VSX: https://open-vsx.org/extension/bytecodealliance/wit-idl
  • Or install via CLI: ovsx get bytecodealliance.wit-idl

From Source

Prerequisites

This extension includes a WebAssembly component that requires the following tools for building:

• Rust (with cargo): Required for building the WebAssembly module
• wasm-pack v0.13.1: Used specifically for the wit-bindgen-wasm subproject

You can install these dependencies by running:

# Install Rust (if not already installed)
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# Run the setup script to install build tools
npm run setup-wasm

To install from source, follow these steps:

• Clone the repository: git clone https://github.com/bytecodealliance/vscode-wit.git && cd vscode-wit
• Install build dependencies: npm run setup-wasm
• Run npm commands to install: npm ci && npm run install-extension

Publishing (for maintainers)

This extension is automatically published to both Visual Studio Marketplace and Open VSX Registry through GitHub Actions when a release is created.

Required secrets:

• PAT_VSCE: Personal Access Token for Visual Studio Marketplace
• OVSX_PAT: Personal Access Token for Open VSX Registry