With this post, I start a new series to share my experiences with developing a Visual Studio Code extension. While you’re reading it, you will learn about these topics:

  • Visual Studio Code extensibility fundamentals
  • Turning your mindset from using .NET (C#) to working with the JavaScript Stack
  • Understanding the techniques to develop a virtual machine that emulates real hardware
  • Designing your software with testability in mind

Background

About 18 months ago, I started a new GitHub project, SpectNetIde. The project aimed to create a Visual Studio 2017 integrated development environment for the retro computer of the ’80-s, ZX Spectrum. Though it started as a fun project, later it proved itself to be pretty useful. As I’ve been working as an agile coach and architect for seven years, I could use SpectNetIde at my customer teams to teach software design and testing principles. I have a strong .NET background, so I chose C# as the programming language for the project.
SpectNetIde became popular among programmers creating software for ZX Spectrum, yet, it has a significant drawback. It runs only on Windows. Many Spectrum fans use Mac, and Linux, too. SpectNetIde would not be an alternative for them.
About half a year ago I decided to look for a platform-agnostic solution that does not has this disadvantage. I started the SpectNetVsc project that aimed to create a ZX Spectrum IDE integrated with Visual Studio Code.
Now, I’m over the first — and probably the most challenging phase — of the project: I can run a high fidelity ZX Spectrum emulator within Visual Studio Code. Here are a few screenshots:

The emulator is loading the Pac-Man game from the tape device

The Pac-Man game in action

The emulator IDE within Visual Studio Code: The machine is paused; Z80 Registers; Disassembly at the current execution point; Memory contents

Topics of the Series

While I created SpectNetIde and SpectNetVsc, I have learned great and exciting things I would like to share with you. Here is a list of topics I plan to publish and discuss — and it is only the top of the iceberg.

  • A short introduction to the ZX Spectrum microcomputer
  • How to create a software abstraction of real hardware?
    • Building a device and component hierarchy
    • Coping with timings
    • Making a high-fidelity display
    • Memory and paging
    • Tape emulation
    • Keyboard
    • Sound
    • Floppy disks
  • What are the challenges of implementing a CPU?
    • Execution cycle
    • Instruction sets and decoding
    • Interrupts and signals
    • Contended memory
    • I/O
    • Synchronization with other hardware components
  • Creating a simple Visual Studio Code extension
    • How to create a simple VS Code extension
    • Debugging VS Code extensions
    • Syntax highlighting
    • Adding your custom programming language support to VS Code
    • Source code debugging
    • Visual Studio Code Themes support
  • Creating a VS Code WebView
    • Understanding VS Code WebViews
    • WebView life cycle
    • Integrating a WebView with its backend, messaging
    • Using local resources
    • Running scripts
    • Using UI frameworks such as Angular, React, Vue, etc.
  • Challenges of implementing a software emulator with a WebView
    • Refreshing the emulator’s screen
    • Creating sound
    • Emulating the physical keyboard
    • Coping with the JavaScript event loop
    • Virtual lists
  • The power TypeScript adds to creating a VS Code extension
    • Interfaces and advanced types
    • Using string literal types and discriminated unions
    • async/await
    • The power of classes
    • Building the project
  • Testing
    • Creating a testing strategy for an emulator
    • Testing the timing of CPU
    • CPU, memory, and I/O operations
    • Screen rendering
    • Interrupts
    • Memory contention
    • User interactions

Future Directions

Working on the ZX Spectrum emulator extension gives me a good picture about the pros and cons of working with Visual Studio code. As you may know, the development team created Visual Studio Code with the Electron Shell. I decided to start a new project, SpectNetEls, to examine how I can create the ZX Spectrum IDE natively with the JavaScript stack using Electron and Angular. There is a long way to go with this project. Nonetheless, when I have results to share, I will do it through my blog. Stay tuned!

 

 

 

 

Leave a comment

Your email address will not be published. Required fields are marked *