Wokwi VS Code Extension

This page explains how to integrate Wokwi with VS Code for ESP32 and OLED display development using the official Wokwi extension.

Installation

1. Open VS Code: Launch your VS Code editor.
2. Go to Extensions: Click on the Extensions icon in the Activity Bar on the side of VS Code (or press Ctrl+Shift+X).
3. Search for Wokwi: In the Extensions search bar, type "Wokwi".
4. Install the Extension: Find the "Wokwi" extension (by Wokwi) and click "Install".
5. Reload VS Code: If prompted, reload VS Code to complete the installation.

Using Wokwi with VS Code

The official Wokwi extension provides a streamlined way to simulate your projects directly within VS Code.

1. Wokwi License Setup:

   • License Required: Wokwi requires a license to edit the diagram.json file.
   • Get a License:
     • After installing the Wokwi extension for VS Code, open the diagram.json file.
     • Wokwi will prompt you to obtain a license. Click the provided link.
     • Create an account on the Wokwi website.
     • Generate a license on the Wokwi website.
     • Wokwi will prompt you to open VS Code. Allow it to do so.

2. Open diagram.json:

   • The diagram.json file in your project's root defines your hardware setup.
   • Open this file in VS Code.
   • The extension will open the diagram in a web view within VS Code.
   • Important: You cannot directly edit the diagram within VS Code. You must edit it on the Wokwi website and then copy/paste the updated diagram.json content back into your VS Code file.

3. Configure wokwi.toml:

   • In the root of your project files, you'll find a wokwi.toml file.

   • This file contains settings for Wokwi integration.

   • Important: You'll need to update the firmware and elf paths in this file to match your project's build output.

   • How to Find the Paths:

     • Build your project in VS Code (Ctrl+Alt+B).
     • In the terminal output, look for a line similar to: Building .pio\build\esp32dev\firmware.bin.
     • Copy the path (.pio\build\esp32dev\firmware.bin in this example).
     • Paste this path into the firmware line in your wokwi.toml file.
     • For the elf path, paste the same path but change the extension from .bin to .elf.
     • Your wokwi.toml should look similar to:

     [wokwi]
     version = 1
     firmware = '.pio\build\esp32dev\firmware.bin'
     elf = '.pio\build\esp32dev\firmware.elf'
     

4. Simulate:

   • The Wokwi extension should automatically detect your project and run the simulation.
   • You can interact with the simulation within the VS Code web view.

5. Iterate and Debug:

   • Make code or circuit adjustments in VS Code.
   • Rebuild the project and update wokwi.toml if needed.
   • Re-run the simulation to test your changes.

Benefits of Using the Wokwi Extension

• Integrated Simulation: Simulate your projects directly within VS Code, eliminating the need to switch between applications.
• Simplified Workflow: The extension streamlines the simulation process, making it faster and more efficient.
• Visual Debugging: Use Wokwi's visual simulation to debug your hardware and software.

Notes

• Ensure that your wokwi.toml file is correctly configured.
• Refer to the Wokwi extension's documentation for more details and advanced features.
• Keep your VS Code environment and Wokwi project synchronized.