10 Visual Studio Code Tricks To Unleash Your Productivity
Tags: productivity, webdev, beginners, vscode
Published: 2020-12-22 02:59:25

*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! 



<a name="top"></a>
## Unleash Productivity!


**Table Of Tricks**

1. [Zen Mode](#zen)
2. [Tab Ninja](#tabNinja)
3. [Multi-Line Editing](#mle)
4. [Multi-Line Editing: God Mode](#mleGodMode)
5. [Terminally Productive](#terminallyProductive)
6. [Sir Emmet](#emmet)
7. [Search-a-dactyl](#searchadac)
8. [Copy That...](#copyThat)
9. [...Over (under) & Out](#overNOut)
10. [Reactive Clicking](#reactiveClicking)
 


<a name="zen"></a>

###1. Zen Mode
![Zen Mode](https://dev-to-uploads.s3.amazonaws.com/i/3ubybjqrsop4q8iut6nn.gif)

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](#top)


---

<a name="tabNinja"></a>
###2. Tab Ninja
![Tabbing Forwards and Backwards](https://dev-to-uploads.s3.amazonaws.com/i/khst8v5ff4yizhrw6y2c.gif)

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](#top)

---

<a name="mle"></a>
###3. Multi-Line Editing
![Mutli Line Editing](https://dev-to-uploads.s3.amazonaws.com/i/2vo47sskawoqsi8tem7s.gif)

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](#top)

---

<a name="mleGodMode"></a>
###4. Multi-Line Editing: God Mode
![Mutli Line Editing User Click](https://dev-to-uploads.s3.amazonaws.com/i/qliq1gnm63tpqgo5yf7x.gif)

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](#top)

---

<a name="terminallyProductive"></a>
###5. Terminally Productive
![Split Terminal](https://dev-to-uploads.s3.amazonaws.com/i/ipg59gpyamr29trsl2pd.gif)

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](#top)

---

<a name="emmet"></a>
###6. Sir Emmet
![Emmet creates a nav](https://dev-to-uploads.s3.amazonaws.com/i/3monvyx12hphwgtutip3.gif)

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](https://docs.emmet.io/). 





[Back to top](#top)

---

<a name="searchadac"></a>
###7. Search-a-dactyl
![Find in folder](https://dev-to-uploads.s3.amazonaws.com/i/3rie8xmnigccsd5x0i8v.gif)

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](#top)

---

<a name="copyThat"></a>
###8. Copy That...
![Duplicate a line of text](https://dev-to-uploads.s3.amazonaws.com/i/6jiwuy2mxhesmd1mgnku.gif)
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](#top)

---

<a name="overNOut"></a>
###9. ...Over (under) & Out
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6vmnsukzkd0jy9amnfqn.gif)

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](#top)

---

<a name="reactiveClicking"></a>
###10. Reactive Clicking

![Clicking Through React Components](https://dev-to-uploads.s3.amazonaws.com/i/6ssbdo2g61ke4q7cto7m.gif)

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](https://stackoverflow.com/questions/49630538/visual-studio-code-navigate-to-jsx-components) if it doesn't work on Windows.*

[Back to top](#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](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf)

[Windows Keyboard Shortcuts Cheatsheet](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf)

[Linux Keyboard Shortcuts Cheatsheet](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf)

---

*Header image designed with [Adobe Photoshop](https://www.adobe.com/products/photoshop.html) and [Unsplash](https://unsplash.com/)*