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.
Discussion (79)
Great tips!
For the point [3], I would mention the option below, too:
"editor.mouseWheelZoom": true
This allows you to zoom only the editor with CTRL+mouse scroll, instead of the full GUI :)
I think, without this option, ctrl+scroll will just scroll up/down but not zooming in/out. Ctrl+"+" will still increase the font size of the whole GUI.
this point is really helpful. I would love to tweet this
Thank you, Mitsuriou!
This is great, I've always wanted to change the color of my comments to something more visible and it's always annoying when I want to open a file and it closes the current file I'm in. Thank you for these tips. Definitely worth sharing with the world.
You can install an extension called Better Comments to highlight your comments marketplace.visualstudio.com/items...
Nice.
You're welcome!
What annoy me the most in code is I can't hide terminal fast and focus switching between terminal and editor quickly. Or may be I missed it..
I'm trying to make a new keyboard shortcut, but haven't figured the correct one.
Any suggestions?
If you use the integrated terminal in VS Code, press ctrl + '`' (backtick key) to open and minimize (not delete) the terminal real quick. If you use an external terminal, press alt + tab to switch between VS Code and other windows including your external terminal. These shortcuts might be slightly different for Mac OS but definitely would be very similar to what I've mentioned in here.
The minimize terminal works! May be i just need to muscle memory a bit. Now i only need the cycle thing
Cool. 😊
I get the trick now. It turns out Ctrl + ` will focus on terminal instead of closing when it doesn't have focus on terminal itself. So I have to click it twice to close it.
Such a smart boy.. not. Annoying really.
🤣👍
Use ctrl+j to quickly toggle terminal
Lately I've been also optimizing dev experience with development containers in VS Code. You can check out a how to here and some of main lessons learned here. My aim was mainly to support an open source project I lead, but I think it can be applied to any sort of projects.
Thank you, I'll check them out.
Part 1 is useful, when opening new file and older closes is quite annoying. But what i don't understand is how uncheck new tab option will work. Isn't it opposite. Like open file in new tab should be checked so vscode open every file in new tab ?
I think we're referring to different settings. Anyway, open your settings.json file and add this if it doesn't work:
ERRMYGERD that stupid tab replacing the last one thing makes me want to throw my computer into the toilet. Thank you these are all useful! I admit I am like the person who said the one they got the most out of was the alt shift down one though heeehe.
Glad you liked them, Chris!
All good tips including number five. I wanted to give you a like just after reading number 1!
Thank you. Fun fact: we're from the same country.
Oh how cool is this 😀 Hai!
Thanks for the support.
Didn't know that we can add colors to comments! Thanks for this 😃
You're welcome, dude!
Point 3, i thought that is why zen mode exists.
I just got to know this feature from you.
Cool.
Nice tips, funnily enough the one I'll use the most is
"press alt + shift + down key to duplicate code"
... also that snippet site! I've been painfully doing mine by hand lol
Xoxo
😊
Great tips! Was completely unaware of the comments one 👍
Thank you so much.
Great post, VS code is really awesome 😎
Please keep continue.
Thank you.
Which theme are you using? I like those popping colors.
Monokai theme (available by default) + Bracket Pair Colorizer 2 extension for striking brackets.
In fact, just go ahead and customise your entire colour scheme. #2 is a bit underwhelming tbh.
My bad.
Great points, I am sure beginners will appreciate them 🙂
Thank you.
Thank you, I knew some of them but I learned something new and usefull from reading this!
You're welcome.
I think my favorite tip at this point in time is No. 5. Needed a new theme, seen some really nice stuff already. Thanks
You're welcome.
Great tips. I do find the tip for opening files in a new tab interesting as my VS Code has always opened files in a new tab and I never set it to do so. It’s just always done it. 🤷🏻♀️
It's because you're the chosen one.
Great article! The first point is one of the most annoying things to me with VS. Thanks!
Yeah, it annoys the heck out of every dev.
Nice tips
Thank you.
Great ...
Thank you.
The 1st point is super useful! Been annoying me for ages, when the current open file, gets replaced with another. Thanks :)
Yes, it had been an unsolved mystery for years.
Found it helpful, thankyou
You're welcome, Tech Guy!
Valeu! Muito boa essas dicas!
😊
To Select Language Mode for current open file, press "Ctrl + k" then release and press "m"
Nice.
Wow, I love these!
Thank you.
@Mohmed Ishak indeed very useful tips, a special the first one!!!
Thank you very much.
Thats really helpful,, thanks!!
You're welcome.
Some comments have been hidden by the post's author - find out more