DEV Community

loading...
Cover image for 10 Visual Studio Code Tricks To Unleash Your Productivity

10 Visual Studio Code Tricks To Unleash Your Productivity

gedalyakrycer profile image Gedalya Krycer Updated on ・5 min read

Recently updated to include Windows/Linux keyboard shortcuts.

Overview

VS Code is a fantastic program with hundreds of features that makes coding a breeze. Below are just some of the tricks that have helped me program more efficiently. (And feel like a cool hacker, even in a CSS file. 😎)

Please note that many of these are not limited to VS Code. Try them out in your IDE of choice and let us all know in the comments below if they work!

Unleash Productivity!

Table Of Tricks

  1. Zen Mode
  2. Tab Ninja
  3. Multi-Line Editing
  4. Multi-Line Editing: God Mode
  5. Terminally Productive
  6. Sir Emmet
  7. Search-a-dactyl
  8. Copy That...
  9. ...Over (under) & Out
  10. Reactive Clicking

1. Zen Mode

Zen Mode

Ever get overwhelmed with multiple panels, tabs, files, and terminal windows? Me too. Luckily, VS Code offers a view called Zen Mode that simplifies the screen and lets you focus on just the code. 😌

macOS Shortcut: command + option + shift + k

Windows/Linux Shortcut: ctrl + k + z

Menu: View > Appearance > Zen Mode

Exiting: esc + esc

Back to top


2. Tab Ninja

Tabbing Forwards and Backwards

We all are pretty used to tabbing our code over to get nicely indented blocks.

However, what if we pasted in some new code and VS Code decided five indents was better than one? Clicking and backspacing each line is not fun.

Feel like a ninja and expertly tab that code backward and into place when holding down shift. 🥷

macOS/Windows Shortcut: shift + tab

Linux: Likely to work, but can't confirm.

Back to top


3. Multi-Line Editing

Mutli Line Editing

It is all too often that a class name changes and we get the joy of updating it in 6 (or 60) different places.

With this command, you can simply select a word(s) and it will place a cursor by all matches in the file.

Then, like the programming master you are, you can update the code in every selected place — at once. 🙌

macOS Shortcut: f2

Mac Keyboard Shortcut: command + fn + f2

MacBook Touchbar Shortcut: fn + f2

Windows/Linux Shortcut: ctrl + f2

Back to top


4. Multi-Line Editing: God Mode

Mutli Line Editing User Click

The above trick is all well and good, but who really wants a machine controlling every aspect of our life? What if you want to target multiple elements that are not the same?

VS Code also lets you drop multiple cursors wherever you want, for precision batch editing. (Who's smart now Skynet? 🤖)

macOS Shortcut: option + click

Windows/Linux Shortcut: alt + click

Back to top


5. Terminally Productive

Split Terminal

A common developer workflow includes using a live server and making frequent commits to a git repository.

However, quitting your server, then navigating to the project folder, and making a commit is a lot of steps.

Instead, split your terminals in VS code with the live server on one side and your git hub repo folder on the other. No more roadblocks! 💪

This is my preferred React set-up because I can install packages and run builds on the left and switch branches on the right.

macOS Shortcut: command + \

Windows/Linux Shortcut: ctrl + \

Back to top


6. Sir Emmet

Emmet creates a nav

Emmet is an included toolkit in VS Code that is also available in many other IDE's. The first time I saw it being used, my jaw hit the ground.

Like a coding butler, you just give it the desired shorthand code, kick your feet up on the desk and watch it effortlessly render full HTML, CSS, or even JSX. 🧐

  • HTML Boilerplate: ! + spacebar

  • Nested Elements: div + > + p + spacebar

  • Multiple Elements: li + * + 3 + spacebar

  • Div With Class: .class-name + spacebar

  • Any Element With Class: h1 + .class-name + spacebar

  • Lorem Ipsum in Element: p + > + lorem + spacebar

  • Sibling Element: h2 + + + p + spacebar

These are just some HTML examples. Many more commands and in different languages are available in Emmet's documentation.

Back to top


7. Search-a-dactyl

Find in folder

Congrats, you finished a new feature and ready to deploy... Oh, but first you need to find all the console.logs you used to debug. 😓

No worries! Like a pterodactyl, you use a powerful search feature to hunt within a specific folder for any prey (code).

It will deliver a list of files that contain the search term, limited to that one folder. (Such as just searching within the components folder and not the whole src.)

macOS: select folder in Explorer > option + shift + f > search for term

Windows: select folder in Explorer > ctrl + shift + f > search for term

Linux: Likely to work the same as Windows, but can't confirm.

Back to top


8. Copy That...

Duplicate a line of text
Extra speed in coding can sometimes come down to keeping your hands on the keyboard and not dragging things with your mouse.

VS Code lets you quickly duplicate lines of code in both directions, without ever leaving the board.

macOS Shortcut: shift + option + arrow up/down

Windows/Linux Shortcut: shift + alt + arrow up/down

Back to top


9. ...Over (under) & Out

Alt Text

Don't take your hands off the keyboard just yet! In addition to copying code, you can move around it as well! 💁‍♀️

macOS Shortcut: option + arrow up/down

Windows/Linux Shortcut: alt + arrow up/down

Back to top


10. Reactive Clicking

Clicking Through React Components

I love React, but it can be a bit confusing when trying to find a deeply nested component. Thankfully, VS Code provided a way to quickly drill down through components with a simple click.

macOS Shortcut: command + click (on component)

Windows/Linux Shortcut: ctrl + click (on component)

Refer to this article if it doesn't work on Windows.

Back to top


Productivity Unleashed

Hopefully, a few of these were new to you and help speed things up in your next project! I'd love to hear in the comment section what productivity tricks you enjoy using in VS Code. Happy coding! 🤓

Resources

macOS Keyboard Shortcuts Cheatsheet

Windows Keyboard Shortcuts Cheatsheet

Linux Keyboard Shortcuts Cheatsheet


Header image designed with Adobe Photoshop and Unsplash

Discussion (22)

pic
Editor guide
Collapse
anamdiazs profile image
Ana María Díaz

Also add vim extension!!

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

I have heard great things about VIM. I will certainly check it out, thank you for the suggestion.

Collapse
saisandeepvaddi profile image
Sai Sandeep Vaddi

The VSCode VIM extension is unbearably slow for me. Sometimes I have to wait for characters to appear after typing.

After trying couple of times, I finally gave up.

Collapse
dhaladitya108 profile image
Aditya Prasad Dhal

for 3.multi-line editing, in windows we can use <ctrl> + D which is much easier to press than the above mentioned key

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

Nice! Thank you for sharing that alternative.

Collapse
dzehavi profile image
Doron Zehavi

Very Helpful, bookmarked. Thank you

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

You are welcome!

Collapse
nasimuddin profile image
Nasim Uddin

Wow, terminal splitting is cool. Didn't knew about that. Thanks

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

It’s such a helpful feature. :) You can split into more then two as well. I believe this shortcut will also work in other area of VS Code, but I mainly use it in the terminal section.

Collapse
djmisha profile image
Misha Osinovskiy

very nice tips - thank you!

Collapse
afhamou profile image
Auwalu Hamza

Thanks 👍

Collapse
gedalyakrycer profile image
Collapse
madza profile image
Madza

didn't know #10, will be handy 😉

Collapse
amen profile image
Amen Allah Menjli

Thanks very helpful !

Collapse
phatdang profile image
PHAT DANG MINH

Thanks, so help in code.

Collapse
gedalyakrycer profile image
Collapse
aneenajohn profile image
aneenajohn

Much needed. Thanks!

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

You're welcome, happy coding!

Collapse
nirmaljpatel profile image
Nirmal Patel

Would you mind telling what tool you use to record these videos? Especially interested in showing of keys pressed in the popover toasts.

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

For sure! I recently discovered the gifox.io app and used it for this post. It lets you do full-screen recordings for up to 10 seconds.

In the capture menu settings, you can enable the clicks and keyboard presses.
gifox capture settings

Collapse
hakymreality profile image
Hakymreality

It's nice but not everyone uses a Mac so I kinda had a hard time figuring out the commands on windows and Linux

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

Thank you for that feedback, @hakymreality and I agree! I have just updated the post to also include Linux/Windows keyboard shortcuts and a new resource section at the end that has more OS-specific shortcuts from VS Code. Happy coding!