Architecture of VS Code

Question

Are there articles or presentations about building VS Code - architecture, approach for plug-ins, any abilities to communicate with OS specific stuff etc?

Coming form .NET, we have Windows-only apps but want to go cross-platform. First idea is to move stuff to .NET Core, although I am not sure how difficult that is for apps that are using Windows specific resources. In any case we are also looking into other options, including possibility to write something from scratch. VS Code came to mind as cross-platform and extendable. All I know is that Electron is used for UI, you can write plug-in for almost any part and it is open-source (or at least Codium is).

Therefore, I would like to learn more about architecture, what other languages are used for components and why, what problems were faced etc. I was hoping to find some articles and presentations, or disussions from people that were involved. But except for some basic info, I end up finding how to create solutions using VS Code.

So do you know some good links, perhaps not specifically about VS Code but similar architectural solutions?

Thx

Appease

Answer 1

VSCode is "simply" an Editor/IDE/Dev platform built upon Electron. If you want to build a generic cross platform application, perhaps you should start look into Electron (or NW.js) rather than VSCode.

Everything is JavaScript (or TypeScript), Node.JS processes and an embedded Chromium browser for rendering "web pages" to construct the application. Typically a render process and a main process run in parallell swapping messages for communication. The real UI part is actually whatever you want, like React, Angular or some plain vanilla HTML+CSS+JavaScript.

Essentially - you are shipping a browser with a pre-loaded web page and a bundled Node.JS backend as your application. The major part of your application architecture will be the same as for any browser based application using HTML5. Like usage of Local Storage, Session Storage etc.

There are some basic high level architecture described on Electron docs https://www.electronjs.org/docs/tutorial/application-architecture.

A walk through of the internal architecture of Electron: https://www.youtube.com/watch?v=oTDjyMTZU1s

As you likely already have a ton of C# code and libraries - as well as C# coders - that you may want to reuse there is also a .NET version of Electron https://github.com/ElectronNET/Electron.NET . For instance if you want to do the UI in Blazor. Still, the architecture is pretty much the same as if you would have done a web application. You simply bundle the browser and backend.

Goldia

So it is Node.js that handles debugging? I have no experience with it, just read now on the link you provided that it can handle precompiled native code, which for us might be a good way to go. And Extension API is powerful as you design it, right? Are there any plugin architecture articles in this fashion you would recommend? – Appease

This answer just says, "VS Code uses Electron" -- I already knew that, I was curious to know HOW is uses it, i.e. what it's architecture is at a next level of detail. For example, how is behaviour partitioned between the main and renderer processes -- which of these processes opens (reads and writes) files on the local system? – Coney

Answer 2

Eclipse Theia is a good place to look. It directly supports VS Code extensions, implements the DAP (debugger adapter protocol) and LSP (language server protocol), and has a very similar look and feel to VS Code.

Theia is completely modular so you can adapt the framework extensively for whatever your app is, while reusing a lot of existing infrastructure. It's open source, and you can make use of OpenVSX to provide an in-house extension repository and GUI interface to the extension repo with it. Most important for me, it has good documentation.

I came across this question looking for something similar to OP's question, and landed on Theia.

Erinn