How I made my VSCode look stunning

Microsoft’s Visual Studio Code is a very popular lightweight, cross-platform code editor used by many developers worldwide. From its vast extensions, interactive playground, font ligature support, emmet, intellisense it has become one of the top code editors.

To make things more interesting Microsoft releases the source code for their popular editor on GitHub. Although this comes with a small caveat. This particular version comes without any proprietary code from Microsoft. This has some considerable implications which will be dealt with in the later section.

“Any chance you’re going let us know what you’ve done with it ?”

I’ll guide you through the steps following which even you can replicate the same with your code editor. Bear in mind that it currently is supported for MacOS users only.

Goodbye Visual Studio Code

You guessed it right. These custom tweaks can’t be replicated on the standard version of VSCode developed and marketed by Microsoft. Instead, we will be using the open-sourced version of VSCode also called Code- OSS. Unless you are a pro-developer capable of editing the source code all by yourself, replicating with just a glimpse of a picture, we shall be taking the help of a few fellow developers. So, for this little venture of ours, for those of you who want their code editor to look the same, I shall assume that you are familiar with using the terminal.

Our first stop would be at a GitHub fork of VSCode. Open the terminal app and create a clone of the repository following which you’ll need to change the working directory as ‘vscode-vibrancy’.

Install the following packages onto your computer :

1. Node.JS
2. Yarn
3. Gulp
4. Python and C/C++ compiler

Time to compile

Run the following command,

yarn

This command downloads all the dependencies required for the code editor to function.

This will take a considerable amount of time so be patient.

Once the dependencies are downloaded, run the command

yarn run watch

This command will start the compilation process. Once it’s successfully compiled. Kill the process with Ctrl + C

Now to open the VSCode, run the following command

sh /scripts/code.sh

You should now be greeted with the code editor in all its glory. Now all there’s to do is to make some minor modifications.

Enough talk, let’s customize

For the color theme, head over to GitHub where you can download this custom color theme. Copy the downloaded folder into the extensions folder of vscode-vibrancy. Copy the contents of ‘workbenchSettings.txt’ into the settings.json. Now all you have to do is apply the color theme.

For the fonts, I went overboard with copying the ligatures from Fira Coda into Operator Mono by using this tool from GitHub.

Drawbacks

So after all this hassle, you’ve managed to get it running. It looks great and has most of the features of VSCode. What could possibly go wrong?

I did mention that it is an open-sourced version right? Well turns out the Visual Studio Marketplace is proprietary and can’t be accessed. There is a workaround for that though, simply copy the following code into the product.json file. Microsoft’s custom additions to VSCode will also be missed.

"extensionsGallery": {"serviceUrrl": "https://marketplace.visualstudio.com/_apis/public/gallery","cacheUrl":"https://vscode.blob.core.windows.net/gallery/index","itemUrl":
"https://marketplace.visualstudio.com/items"},

Apart from that, you will be missing out on critical updates. So every time a new update comes along, I’d not get my hopes up too high.

Do you think it’s worth all the effort? Do let me know!