VSCode extension Personal Access Token

I received an user request for my Format Comment VSCode extension, which pleases me greatly.

Implementing the feature itself took me just a few minutes, then I spent the next hour trying to figure out how to setup the “Personal Access Token” to publish the extension to the marketplace. So, to avoid this waste of time to my future self, these are the steps:

1. Go to dev.azure.com/rodrigocfd to see the tokens;
2. If necessary, create another one, which will be a long string;
3. Organization must be set to “All Accessible Organizations”;
4. On the project directory, run vsce login rodrigocfd and paste the long string when prompted.

The Personal Access Token lasts at max 1 year, so this process will have to be made at least once a year

Fixing Visual Studio Code icon overlay color in Linux

A few months ago I had to dig into Visual Studio Code source until I found a change in the built-in light theme, where they changed the overlay color of the suspended autocomplete menu. This ended up being a question and an answer on StackOverflow, and it made up to my Windows patch.

There’s no patch for Linux, though. Another jab at my lack of multiplatform GUI framework – but I digress.

So, for the record, with Visual Studio Code standard *.deb installation, this is the file with the light theme:

/usr/share/code/resources/app/extensions/theme-defaults/themes/light_vs.json

The line to be commented out is:

"list.activeSelectionIconForeground": "#FFF"

Better antialiasing on Windows Visual Studio Code

In Windows, Google Chrome browser suffers from font bad rendering, with fonts being too thin and washed on screen. I don’t really know the technical cause, but it seems related to antialiasing and how the fonts are drawn, maybe a DirectX Graphics misuse.

Visual Studio Code is built upon Electron infrastructure, which in its turn uses Chrome engine to render stuff. So, VSCode suffers from the same problem: fonts being too thin and bad to read. Writing source code in such an environment is hard on the eyes. Until this day, I simply used Consolas font, which is naturally thicker. But I was never satisfied.

On Chrome, I fixed the problem by using Font Rendering Enhancer extension. It’s a rather simple extension that just adds the following style everywhere:

* {
  text-shadow: transparent 0px 0px 0px,
    rgba(0, 0, 0, 0.5) 0px 0px 0px !important;
}

The variation occurs in the 0.5 value: the higher the value, the darker the fonts will be rendered.

At some point, I also started facing the same problem on Firefox, and I asked about it on Reddit. Then I used addon to apply the style globally, and the problem was solved.

Now, back to Visual Studio Code, I started wondering whether it would be possible to add a global style to the whole window, since it’s just a browser window, after all. Turns out it’s possible by directly injecting CSS into Developer Tools, but it will go away when you close VSCode. Now, to make this change permanent – at least until the next update –, we can edit the main CSS file of VSCode and inject the CSS snipped globally. The file is:

(install dir)
 resources
  app
   out
    vs
     workbench
      workbench.desktop.main.css

There’s a side effect, however: when opening the VSCode again, you’ll receive the following warning:

Your Code installation appears to be corrupt. Please reinstall.

What means VSCode checks its own files when it’s launched, and that’s good, given the amount of garbage that an Electron program has. You can ignore this warning though, although there’s a very remote risk that something bad was actually injected into your VSCode installation without your consent, and you’ll be vulnerable. But it would be a very rare event, indeed. You’ll also see “[Unsupported]” in the titlebar.

GitHub markdown style on Visual Studio Code

These days I found out the very useful feature on Visual Studio Code for markdown editing, which renders the MD file on VSCode itself, opening a new tab at right.

However, the rendered markdown styles matches VSCode itself. Since I mainly use markdown on GitHub, I’d like to preview the markdown using GitHub style. So I inspected GitHub and made a quick CSS file to VSCode:

Save the file and add this entry to VSCode user settings, which on Linux looks like this:

"markdown.styles": ["/home/your_name/.config/Code/User/eu-markdown.css"]

The markdown preview should be pretty close to GitHub styling now.

Visual Studio Code settings

This morning I was setting up Visual Studio Code at a Lubuntu virtual machine, and after saving the keyboard shortcuts, I opened my current editor to get the settings. Since some of them I consider essential, I decided to publish them here, for further reference.

Visual Studio Code slow startup on Linux

Recently I’ve been having a problem with Visual Studio Code, current version 1.5.2, on Linux. The program startup was too slow. I mean, the absurd of waiting over 40 minutes from the doubleclick until I see the window!

I discovered that there are two executables within the VSCode package: one at the root directory, and other inside “bin” subdir. The outer seems to be a wrapper to the inner, since I made a test and ran the inner executable alone... and bang, VSCode started in about 3 seconds – not an example of quick startup, but acceptable.

So I redirected my shortcut to point directly to the executable inside “bin” subdirectory. Whatever the outer executable does, it’s clearly buggy.

Visual Studio Code keyboard shortcuts

These days I’ve been using Visual Studio Code at work. It’s a nifty editor written in NodeJS. Being a Visual C++ user, however, I missed some keyboard shortcuts I like to use. To remedy this, I customized the “keybindings.json” file to make it more familiar. To use it, go File → Preferences → Keyboard Shortcuts.


As a meta side node, this is the first time I use GitHub’s Gist to share code of mine.