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.

• Never Browse For A File Again
• Get More Space
  • Toggle The Sidebar
  • Zen Mode
  • Toggle The Panel
• Navigate Splits
  • Create & Close Splits
• Navigate Tabs
• Word Wrap - Stop Scrolling Long Lines
• Zoom For Zoom
• Command Pallete
  • Screencast Mode
• Cheat Sheet
• Send Your Tips

Never Browse For A File Again#

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.

Get More Space#

Toggle The Sidebar#

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.

Zen Mode#

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

Toggle The Panel#

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

Navigate Splits#

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.

Create & Close Splits#

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

Navigate Tabs#

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.

Word Wrap - Stop Scrolling Long Lines#

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.

Zoom For Zoom#

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.

Command Pallete#

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.

Screencast Mode#

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.

Cheat Sheet#

Send Your Tips#

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