5 Visual Studio Code Hacks That You Will Thank Me For (And They're Not Common Points Like "Install Prettier Extension")

Hello coders! You've always heard the same VS Code hacks over and over again like "install Prettier extension to format your code", "press alt + shift + down key to duplicate code", etc. In this article, I'll share some VS Code hacks which I don't usually see being shared around (except number 5, it's a pretty generic advice). You owe me a like if this article helps you.

[1] Open Files Automatically In A New Tab

Isn't it annoying when you've got file A opened and you want to open file B but when you click file B, file B does open but file A closes? You might double click file B to open in a new tab but does it disappoint you sometimes like it did to me? To overcome this problem, search for "workbench.editor.enablePreview" in your settings and uncheck the option. From now onwards, VS Code will always open files in a new tab.

[2] Change Color of Comments

Not forcing you, but some colors for comments just hit different. As for me, I prefer this exact green for my comments because it's easier to locate my comments in the codebase. To do this, in your settings.json file, add the following code, or if it already exists, delete it and replace with this code:

  "editor.tokenColorCustomizations": {
    "comments": "#229977" // change to any color you like
  },

[3] More Real Estate

Sometimes all you want is a larger view of the files, folders, and code. So you might consider zooming out by pressing ctrl + '-'. To zoom in press ctrl + '+'. Plus, press F11 which would hide the taskbar and header of VS Code, giving you more view of VS Code, hence more focus.

[4] Generate Custom Snippet

A custom snippet (if you don't know) is a template for code where you would type a few letters on your keyboard and the template/boilerplate code would be automatically generated which you can work on. If you still don't get it, it's the same thing as typing "rsf" in a React file which would generate a functional component (provided that you have installed the right extension). To make a custom snippet, just head over to this site https://snippet-generator.app/ and type your snippet. Be sure to fill up the tab trigger which are the keys that would trigger your snippet. Then copy the snippet it gives you. Come back to VS Code, go to File > Preferences > User Snippets > New Global Snippets (it might be different to navigate to this on a Mac, so Google it if you couldn't locate it). Paste the copied code. That's it.

[5] Change Theme in VS Code

Okay this is an obvious one (and yes, it goes against the title), but head over to https://vscodethemes.com/ and grab a new theme today. They've got a large collection of themes which can be previewed through an eagle's view.