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!