VSCode Architecture And Overview

I hope, if you are reading this article then you might be curious to know about VSCode architecture. If you have ever worked with other editors like Atom or Sublime; it will be super easy for you to understated the inside of VSCode or become a power user of VSCode . Anyway, it doesn’t matter much at all, as I am not going to compare VSCode with any other editor in this article.

I like VSCode because it gives me a flavor of Visual studio and I am a big fan of Visual Studio. VSCode is an awesome light weight editor-cum-IDE, which provides lots of editing and debugging features for your day to day dev activities although it is mainly intended for the Web Applications). VSCode is highly customizable and you can set your editor environment, as per your desire.

In this article, I am not going to provide much information about how to customize VSCode, but my main intention is to provide some information of VSCode, as in what are the main components it has and how your configuration deals with the editor environment.

Understand the basic technology behind VSCode

Look at the screenshot, given below, which can give you the high level idea about the main pillars of VSCode.

Electron is the UI framework used in VSCode for a user interface.

Monaco is the code editor, which powers VSCode by providing the editor features like validation, basic syntax colorization, side by side comparison, multi edit etc.

OminiSharp and TS mainly provides rich intellisense, project dependencies and language syntax to various IDE and plugins.

If you are not familiar with Electron, please refer to the links, given below, to know about this new technology to build desktop apps, using JS+HTML+CSS.

https://app.pluralsight.com/library/courses/electron-fundamentals/table-of-contents

Let’s jump on VSCODE functionalities and the features.

If you go to VSCode getting started page (https://code.visualstudio.com/docs/), at the left side, you can see the links for different sections.

We can divide them into two categories.

Editor specific
These features are common across all the supported technologies and frameworks like multi-edit, plit editor, side by side editing, compare etc.
Technology and framework Specific features
In this, we mainly keep those functionalities, which are specific to the targeted framework and technologies like invoking debug adapter, language Service etc.

You can imagine VSCode as a combined entity of the various components, as shown in the screenshot, given below.

Now, I think we got some idea of VSCode main components. Let’s explore more and try to understand how they interact with your code.

Broadly we can divide VSCode components into four categories, as given below.

As we already discussed earlier that the editor provides some common functionalities irrespective of your target framework and technologies like multi edit, theme selection etc.

In the screen shot, given below, in the middle layer components, you can consider them like a listener. They keep monitoring the user’s actions and identify the folder contents to provide rich editing and debugging experience. If there is any event trigger due to the user’s action, pop-up will be displayed to the user in the form of info, action, warning or an error message.

Multi Config Settings and execution

If you are building an Enterprise level Application, it may have multiple types of projects in your solution. In this case, your folder may contain various config files (at root level).

When you perform build or debug operation, VSCode reads those config file in a specific sequence and sets the editor environment accordingly.

Here is the sequence of config execution, when you perform build (CTRL+SHIFT+B) or start debugging.

Run Config execution

To understand the dependencies shown above in action, let’s play with VSCode.

For this, I am going to use Yeoman (package manager) to scaffold my ASP .NET project.

Setup- I am assuming that you have npm setup done and Yeoman is already installed in your dev machine. Please follow the link, if you would like to know more about Yeoman and doing dev environment setup first time.

Steps

Create a test directory in your system.
Launch command prompt and set your working directory (created in the first step).
Once you install Yeoman (>npm install –g yo) the next step is to install generator, so that you can create your proj template.
Execute the command >npm install generator-aspnet.
Run the command > yo aspnet.
Select empty Web proj and hit enter to get the default settings.
Now, launch VSCode and open the folder created in step one.
Launch command palette by pressing F11 key and run ” dotnet restore” command to restore the packages. You may get an error message, if you don’t have .NET Core installed in your machine, install it from here.
After installing the .NET Core, use “CTRL+SHIFT+B” to compile your project. I hope, you will get the success message in the output Window with zero warning and an error.

So far, we have Vanilla code without any external dependency. If your project has some external dependency, add package.json to manage the external dependencies .

How to generate package.json

Run the command, given below and follow the instructions.

>npm init and follow the instruction

Now, whenever you try to install any package from npm, it will automatically update your package.json file for the package.

Let’s add some client side code ( TS or JS code) in our project by following the steps, given below.

Add new scrips folder in our project.
Now, we will add one typescript file with the code snippet, given below.
1. class Startup {
2. public static main(): number {
3. console.log('Hello World');
4. return 0;
5. }
6. } Startup.main();
We can add tsconfig.json file to manage type script files.
Add tsconfig file with the settings, given below.

If you are planning to have mixed TypeScript and JavaScript projects, you can use jsconfig as well. For more info follow.

Now, our setup is ready to debug the code but before it, we need two config files launch.json and tasks.json.

To create launch.json file, click on debug view icon from the left side of VSCode and then click on small gear icon to select the target debugger.

To generate tasks.json, launch command palette, type “Configure” and select Tasks: Configure Task Runner.

Now, our project has config files, given below.

Project.json
Package.json
Launch.json
Tasks.json
Tsconfig.json or Jsconfig.json

To understand, how these config files are linked together and execute in a sequence, we will make some changes in the config file one by one and verify an error message display in the output Window.

First, add some invalid configuration in project.jsons and save the changes. It will pop-up a message, as shown below and when the user performs restore operation, it will prompt an error in the output Window.

Fix the issue in project.json, add some invalid entry in the tasks.json and try to build the project.

Result

You can see that it will prompt an error in the output Window for tasks.json.

Now, add invalid entries in launch.jsosn, tasks.json and start debugging.

Result - You will get an error message for launch.json.

The error message, shown above is pretty straightforward, as we are invoking tasks.json through launch.json. To understand it more clearly, now fix the prelaunchTask name in launch.json and start debugging.

Result - You will get the error message, shown below (from tasks.json).

Let’s play with tasks.json and tsconfig.json.

Add some invalid entry in both the files (tsconfig along with tasks.json) and build the project.

Result - You will see the error prompt for tasks.json.
Now, fix the issue with tasks.json, keep an invalid entry in tsconfig.json, build the project again and verify an error.

Result - This time, you will get an error message for tsconfig.json.

I hope, now you have understand how these config settings are linked together. If you are looking for the supported config options, please refer to references section, where I added some useful links.

References

Though there is enough information available at https://code.visualstudio.com/docs. I have collected the links, given below, which may be useful to getting started with VSCode.