21 VSCode Shortcuts to Make Coding Faster and More Fun
Tags: javascript, webdev, vscode, codequality
Published: 2019-07-13 12:34:21

Find me on [medium](https://medium.com/@jsmanifest)

So you've installed some great tools or extensions to accelerate your development flow and are having a great time. That's great but there's a slight chance you might be missing out on some of the shortcuts that VS code offers, even if its just one. Not everyone has time to go through every shortcut to find the ones that help them code faster and funner--because there's just _too many_!

In addition, a lot of the points listed in this article can be custom bound to a keyboard shortcut, so remember that you don't _have_ to be opening up the command palette everytime you want to invoke a command.

In this post I will list my top favorite shortcuts that make me a faster coder. I personally think it makes coding a lot funner when applying these shortcuts. Watching your time get cut in half makes me feel proactive :)

Here are 21 VS Code Shortcuts To Code Faster and Funner:

## 1. Search Text Through All Files At Once (Windows: `Ctrl + Shift + F`, Mac: `Control + Shift + F`)

One of my favorite features of VS code is having the ability to search any matching text throughout _all_ of your files in the project directory. The best part? It is strikingly _fast_!

To use this feature, you can open up the view by pressing `Ctrl + Shift + F`. It will show this sidebar to the left of your editor:

![show-search-1](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/21-vscode-shorts-to-code-faster/show-search1.jpg)

By typing in a text and pressing _enter_, VS code will provide you a list of results matching the text like below:

![show-search-2](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/21-vscode-shorts-to-code-faster/show-search2.jpg)

You can also _replace all_ the matching texts in each resulting file at once in the blink of a second. If you click this tiny arrow at the left, it will bring up a second input box below where you can input the text to _replace all_ along with clicking the tiny box that appears to the right:

![show-search-3](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/21-vscode-shorts-to-code-faster/show-search3.jpg)

This feature can save you and your team a ton of time in the most timely pressured situations.

## 2. Setting Accent Color For Tabs (Material Theme--not exclusive)

Are you tired of seeing the same accent color for tabs everyday? If you're using the [Material Theme](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme) extension for VS code, you can actually choose a custom accent color for your tabs to look like this:

Red:

![accent-color1](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/21-vscode-shorts-to-code-faster/accent-color1.jpg)

Purple:

![accent-color2](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/21-vscode-shorts-to-code-faster/accent-color2.jpg)

Yellow:

![accent color in vscode](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/21-vscode-shorts-to-code-faster/accent-color3.jpg)

There are 16 different colors you can choose from!

So if you have the extension, open up your command palette (Ctrl + Shift + P), select _Material Theme: Set accent color_ and choose a color from the list, it will change the underlining color of your tabs as shown below:

![accent-color in vscode 4](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/21-vscode-shorts-to-code-faster/accent-color-4.gif)

But wait a minute... I'm not using Material Theme in that example.

That's because with the Material Theme extension installed, the feature is available throughout _all of your themes_. You don't _have_ to be using the material theme to use this feature!

## 3. Process Explorer

Do you find your VS code editor a bit slow sometimes? Ever wished you can take a peek at what is eating up your memory? Well if you haven't known this already VS code has a Process Explorer feature which will allow you to open up a window as shown below:

![process explorer1](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/21-vscode-shorts-to-code-faster/process_explorer1.jpg)

Look familiar to you?

You might have seen this from the windows [Task Manager](https://www.howtogeek.com/66622/stupid-geek-tricks-6-ways-to-open-windows-task-manager/) which can be used when pressing _Ctrl + Alt + Delete_ **outside** of your VS code editor. (Mac: `Control + Option + Delete`)

## 4. Expand Bracket Selection

Open your Keyboard Shortcuts and search for *Expand Bracket Selection*

This is one of those features that took me awhile to discover, because I simply couldn't guess the name of this feature.

When I first saw this in use by someone from a YouTube video, I knew that I had to do whatever it takes to find this one so that I can put a keyboard shortcut and use it in my projects.

Using this feature will allow you to automatically select the _entire_ block from the beginning curly braces to end:

![expand bracket selection for vs code](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/21-vscode-shorts-to-code-faster/expand_bracket_selection1.gif)

I find these to be very useful in situations where you want to swap an if/else block.

## 5. Re-open a Closed Editor

When you're working on a huge project with files lying around everywhere, it might be a little frustrating when you accidentally close a tab and have to search for it again in the side menu because VS code has a habit of auto expanding directories.

Well, you can actually just re-open a closed editor by pressing `Ctrl + Shift + T`. (Mac: `Control + Shift + T`) You can even open up the tab before that, the tab even before that, etc. It's an undo feature exclusively for tabs.

## 6. Open a File By Matching Text

And speaking of searching for files, you can search for and open files on the fly. This is one of my top favorite features because you don't really need to manually click through directories to re-open a file that isn't open anymore. You won't believe how much time this continues to save for me every day.

I have my keyboard shortcut bound to `Ctrl + T` (Mac: `Control + T`) to use this feature. You might have a _Go to Symbol in File_ window pop open when you press that. I never really use that feature so I have it disabled.

If you want to bind this to a hotkey, open up the keyboard shortcuts (File > Preferences > Keyboard Shortcuts) and search for `workbence.action.quickOpen`. Double click it and assign `Ctrl + T` to it.

## 7. Integrated Terminal

You can open up VS code's integrated terminal and instantly use it like a normal CLI by pressing `Ctrl + `` (Backtick). Doesn't it feel great never having to leave your VS code editor?

## 8. Running Extensions

You can view all of your running extensions by opening up the command palette and typing "Show Running Extensions".

As you have might guessed this will show you a list of your running extensions.

...but that's not all. You're also given the information to see which extensions take longer than others on activation. If you were ever wondering why your editor was loading up slower than usual then your answer might be lying within this window:

![show running extensions in vs code](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/21-vscode-shorts-to-code-faster/show_running_extensions1.jpg)

## 9. Reload

I personally think this is one of the coolest features of VS code because it allows you to keep your window in front of you when reloading your editor while having the same effect as if you were to close and re-open it.

Press `Ctrl + Alt + R`. (Mac: `Control + Option + R`)

## 10. Interchange Tabs To Separate Groups

I have a habit of having a tab in the wrong tab group while I'm developing. I also like to avoid using my mouse as much as possible to get my way around things as it involves me lifting up my hand away from my keyboard. My hand is heavy, so I'd like to keep it on my keyboard at all times. Luckily VS code has a way to transfer a tab to a separate tab group by pressing `Ctrl + Alt + Right Arrow` (Mac: `Control + Option + Right Arrow`) to move a tab to the group on the right, or `Ctrl + Alt + Left Arrow` (Mac: `Control + Option + Left Arrow`) to move a tab to a group on the left:

![transfer tab to separate group](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/21-vscode-shorts-to-code-faster/transfer_tab_separate_group1.gif)

## 11. Select Everything to the Left/Right

Sometimes you want to delete everything to the right or left of your cursor. If you weren't aware yet that you can select everything to the right or left of your cursor, this will improve the efficiency in getting things done in code because it simply makes things _quicker_.

For example, to select everything to the right or left:

Windows: `Ctrl + Shift + Home/End`
Mac: `Ctrl + Shift + Home/End`

![select all to the left or right in vscode1](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/21-vscode-shorts-to-code-faster/select-all-rightleft1.gif)

To select _almost_ everything to the right or left (cuts time in half):

![select all to the left or right in vscode2](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/21-vscode-shorts-to-code-faster/select-all-rightleft2.gif)

## 12. Delete Previous Word

To delete a previous _word_, you can press `Ctrl + Backspace` (Mac: `Control + Delete`). This is very useful in situations where you make a typo and you hate having to press and hold the backspace button to get to the part you want to delete:

![deleting a previous word in vscode1](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/21-vscode-shorts-to-code-faster/del_prev_word1.gif)

You can actually use this outside of vs code _almost anywhere_:

![deleting a previous word in vscode2](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/21-vscode-shorts-to-code-faster/del_prev_word2.gif)

## 13. Startup Performance

Sometimes it can just be a pain in the behind when you're lacking further detail on performance issues while you're trying to find out why there is a performance issue in the first place.

And sometimes if you're lucky enough you'll find a tool that gives you all the answers. In VS code, startup performance is a top priority. That's why you're able to pop open a useful window of miraculously all the information you need:

![startup performance 1](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/21-vscode-shorts-to-code-faster/startup_perf1.jpg)

So go ahead and open up your command palette and search _Startup Performance_!

## 14. Select In Words

You can select texts word by word with the shortcuts `Ctrl + Shift + Right Arrow` (Mac: `Control + Shift + Right Arrow`) and `Ctrl + Shift + Left Arrow` (Mac: `Control + Shift + Left Arrow`).

Very useful to select words faster:

![select in words](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/21-vscode-shorts-to-code-faster/select_in_words1.gif)

## 15. Duplicate Line

A very powerful and known feature is the ability to duplicate lines. Simply press `Ctrl + Shift + D` (Mac: `Control + Shift + D`):

![donating money to the poor in vscode](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/21-vscode-shorts-to-code-faster/donate_to_poor1.gif)

## 16. Move to Beginning/End of File

The quickest way to get your cursor to the first or last line of the file is pressing `Ctrl + Home` (Mac: `Control + Home`) to go the beginning and `Ctrl + End` (Mac: `Control + End`) to go to the end.

![move to beginning or end of file in vs code](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/21-vscode-shorts-to-code-faster/begin_end_file1.gif)

## 17. Replace All Matching Occurrences of Text In The Current File

Back when I started coding I had to select matching occurrences manually with my mouse. I'm glad those days are over because VS code provides a _Change All Occurrences_ feature.

You can select any group of text as your selection and if there are more than one occurrences of that selection, you can select and modify all occurrences at once by pressing `Ctrl + F2` (Mac: `Control + F2`). I personally think `Alt + F3` (Mac: `Option + F3`) feels a little easier on the wrist.

## 18. Move Line Up/Down

Moving a line up or down is useful literally every 10 minutes.

Press `Alt + Up Arrow` (Mac: `Option + Up Arrow`) to move up and `Alt + Down Arrow` (Mac: `Option + Down Arrow`) to move down.

## 19. Deleting a Line

You can delete a line instantly by two ways:

Ovewriting the clipboard with `Ctrl + X` (Mac: `Control + X`):

![deleting a line and overwriting the clipboard](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/21-vscode-shorts-to-code-faster/delete_line1.gif)

Preserving the clipboard with `Ctrl + Shift + K` (Mac: `Control + Shift + K`). I personally prefer `Ctrl + Alt + D` (Mac: `Control + Option + D`):

![deleting a line and overwriting the clipboard](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/21-vscode-shorts-to-code-faster/delete_line2.gif)

## 20. Move Editor Left or Right

If you're like me, you probably have an uncontrollable desire to re-order tabs in a group where the tabs are related to one another and the tabs to the left are the _high level_ files while the files going to the right are _lower levels_.

You can control this much easier by using the commands `Move Editor Left` and `Move Editor Right`. I assigned them to `Ctrl + Num Pad 4` (Mac: `Control + Num Pad 4`) and `Ctrl + Num Pad 6` (Mac: `Control + Num Pad 6`) so that they are more intuitive to me:

![moving an editor to the left or right in vscode](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/21-vscode-shorts-to-code-faster/move_editor_leftright1.gif)

## 21. Add Cursor Above/Below

Duplicating your cursors is arguably the one feature in VS code that saves you the most time. This becomes great in situations like typescript:

![cursor above or below in vs code](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/21-vscode-shorts-to-code-faster/cursor_abovebelow1.gif)

Press `Ctrl + Alt + Up Arrow` (Mac: `Control + Option + Up Arrow`) to add cursor above or `Ctrl + Alt + Down Arrow` (Mac: `Control + Option + Down Arrow`) to add cursor below.

## Conclusion

And that concludes the end of this post! I hope you found a new shortcut to use! Look out for posts from me in the future!

Find me on [medium](https://medium.com/@jsmanifest)