Visual Studio Code : A Hacking Guide

We all know Visual Studio Code is a derived version of Atom text editor and Microsoft has added some pepper, salt and sugar to increase its taste so thats why they call it as an IDE rather than a text editor. Atom, it self declare it as a hackable text editor and even have documented how to hack it, but Visual Studio Code doesn’t, thought Microsoft has a page saying customizing visual studio code, they didn’t mention the core part.

I am an insider for Visual Studio code and received the binary for VS Code 0.4.0 for insiders. The email came with the binary attachments says not to distribute it outside because it might annoy users, so I am not giving it here. But today morning only I accidentally noticed there is “Toggle Developer Tools” under Help menu. To be honest I have never used Atom editor before and while drafting this post only I downloaded and installed and noticed the same option in Atom too.

menu togle

I thought this option is there to perform some other work so I clicked on it and found this.


Man, this is opening Google Chrome developer tools. Soooo…. there should be some options to hack it as well and I found the following things. I am not going to more details and I assume you know how to debug a webpage in a browser with F12 tools. (applicable to IE as well :p )

Change background colour of the editor.

You can find it here



Change font size

Untitled fint size

Remember when you close the IDE all changes will be deleted. So what you can do is change the style sheet manually, you can find it from %AppData%\..\Local\Code\app-{your current version || your current version+0.0.1}\resources\app\client\vs\monaco\ui\workbench\native This path for me comes like %AppData%\..\Local\Code\app-0.4.1\resources\app\client\vs\monaco\ui\workbench\native and under this native.main.cs. A very simple tweak you can try is, open this file and replace all #1E1E1E with #045FB4. Now restart the VS code.. BOOOOOOM…!!

What more…?? find them out and share to the community 🙂 happy {coding}

PS : If the images are too small click on them you will get a bigger image and navigate back for the page and since VS Code is in 0.x.x version level all the things described above are subjected to change.

4 thoughts on “Visual Studio Code : A Hacking Guide

  1. This option was always there via F12, but now they removed the mapping….anyways, i’m an insider too and got mail for 0.4 update, but no attachment..any idea how i can update?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s