VSCode Tips & Tricks

VSCode Tips & Tricks

Knowing a few VSCode tips & tricks can vastly speed up your workflow and make development a pleasure. Here are some of our favorite tips.

If you work on a Mac a lot like me switch out the Ctrl key for the Command key. The Alt key switch for the Option key

You can also change or add keyboard shortcuts but that's another article.

Picking through a folder tree to find a file is a waste of time, hit Ctrl/Cmd + P and start typing. You'll get a shortlist of files in an instant.

It's a fuzzy search so you can type any part of the filename, the more you type the shorter the shortlist. You can keep typing or use the arrow keys to select the file.

vscode quick find go to file

After the first tip, you likely won't need the sidebar anymore. It distracts and takes up space so you see less of your code.

Ctrl/Cmd + B will toggle the sidebar so you can show and hide it at will. We recommend you hide it.

vscode toggle sidebar tip

If you really want maximum space and minimum distraction then hit Ctrl/Cmd + k release then z

To switch back then it's the same shortcut.

It will automatically remove the sidebar for you and maximize the window. You can still toggle the sidebar to open and close without leaving Zen Mode using the shortcut you already learned Ctrl/Cmd + B

The bottom panel can also be toggled, we often have the terminal open in the bottom panel. To toggle it open and closed it's Ctrl/Cmd + j

Every time you reach for the mouse you waste time and concentration.

Split screens are great for comparing code and copying from one to the other moving between them using Ctrl and a number.

For example Ctrl/⌘ + 2 will take you to the 2nd split while Ctrl/⌘ + 1 will take you to the first.

Creating a vertical split is most useful. Ctrl/⌘ + \

We already know Ctrl/Cmd + P and start typing the filename which is great for tabs too.

You can also navigate previous and next tabs using Ctrl + Shift + Tab and Ctrl + Tab on Windows.

+ Shift + [ and + Shift + ] on Mac.

Especially with our HTML templates, we tend to get very long lines. Not being able to see the full code, and having to reach for the mouse is inefficient.

Alt/⌥ + z will toggle word wrap allowing you to see all the code.

Sometimes it's handy to go back to full lines to see the structure of the code so you can use this shortcut again to toggle back.

When video conferencing with Zoom, Teams, or similar you may need to share your screen. This is also true of screencasts.

Your HD screen showing VSCode will be unreadable to viewers with a lower resolution. This tip doesn't just work for VSCode either.

Hit Ctrl/Cmd + + to zoom text size and Ctrl/Cmd + - to zoom out.

The + if often also = so you may need to try that.

vs code zoom in and out

You probably know this one but it's so useful it makes the list. Ctrl/Cmd + Shift + p will bring up the command pallet and you can start typing.

No need to dig around for a command and it's a fuzzy search too.

While we are in command mode let's start typing Toggle Screencast Mode until it autocompletes and press return to execute that command.

This is what we use for screencasts with VSCode, it shows the keyboard shortcuts and shows a red circle on mouse clicks.

Mac Windows/Linux Action
b b Toggle Sidebar
j j Toggle Panel
k , z k , z Zen Mode
p p Quick File
p p Command Palette
# # Navigate Splits # is 0-9
z Alt z Toggle Word Wrap
+ + Zoom In
- - Zoom Out
\ Ctrl \ Vertical Split

If you have any tips then join our GurgleApps community to share or get in touch with us.