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!