7 VS Code Productivity Hacks & 17 Extensions that Will Change Your Life

These top tips and tricks will help you dramatically increase your productivity while coding in Visual Studio Code.

If you go through my previous articles, you'll quickly figure out that one of my common themes is how to increase your productivity while coding. 🙄 But so far, I've never mentioned how I optimize my productivity in my coding environment.

I am a massive fan of VS Code for one simple reason: It includes Git and a debugger by default, and you can customize your environment with a myriad of extensions and themes. It also has great backup from the web development community to help you optimize your workflow while coding (your "code flow" 😉 *wink wink).

So today, let's browse the built-in features and extensions that I use every single day to optimize my codeflow. 🧞‍♀️

Happy reading, my friends! 👩🏼‍🏫

Built-in Features

#1. Keyboard Navigation: The Basics

Learning the basics of keyboard navigation will make your workflow way smoother. I mostly use these four tactics:

• ⌘P (MacOS) | Ctrl+P (Windows): To open the command palette to open a file or activate a feature. You are probably using this one ALL THE TIME.

• ⇧⌘O (MacOS) | Ctrl+Shift+O (Windows): The day I discovered this one and understood what "Go to Symbol..." meant, the countless moments I should've used it starting flashing by... 😻 Anyways! This feature allows accessing any function or variable in the file you initially declared at. See what I mean now? Your debugging experience just became a little sweeter buddy! 😼

• ⌃- / ⌃⇧- (MacOS) | Alt+ ← / → (Windows): Wanna move up and down from two specific locations in a breeze? We got ya! With these two navigation shortcuts (Go back / Go forward), you can do so. 😁

• ⌃G (MacOS) | Ctrl+G (Windows): One more for the road, this one gets you right to the line number you need to edit.

#2. Shortcuts: Cut the Entire Line

• ⌘X (MacOS) | Ctrl+X (Windows): Please don't judge! I know you know cut/copy and paste. 🙄 But maybe, you didn't notice that in VS Code, you could cut/copy an ENTIRE line without selecting it? 🤓 If you don't already select the chunk of code you want to cut or copy, the editor will automatically cut/copy the line of code where you positioned your selector.

#3. Shortcuts: Move or Duplicate a Line, Up or Down

• ⌥↓ / ⌥↑ (MacOS) | Alt+ ↑ / ↓ (Windows): Moves a line or a selection up or down from where your selector is positioned.

• ⇧⌥↓ / ⇧⌥↑ (MacOS) | Shift+Alt + ↓ / ↑ (Windows): A bit similar to the last one in the sense that it copies a line or a selection AND THEN pastes it below or above where you positioned your cursor.

#4. Shortcuts: Multi Cursor

• ⌘D (MacOS) | Ctrl+D (Windows): It is a must-know because, well first, it adds to your cursor selection the next match, but also it helps you avoid stupid errors for when you need to change that selection, and you miss that one match. 😎 Sometimes I even use it to edit code on multiple lines!

These are my favorite shortcuts, but I strongly recommend that you take a quick look at the shortcuts list provided by VS Code to find out if others could make your life easier:

• Click here to access VS Code Keyboard shortcuts for macOS.

• Click here to access VS Code Keyboard shortcuts for Windows.

#5. Code Snippets

You've probably used at one point or another code snippets made by someone else, but maybe you've never used one before. In this case, you should know that code snippets are simply pieces of frequently used code that you can insert via a shorthand.

Some extensions provide you with code snippets for different languages and frameworks. But, honestly, the best code snippets will always be the ones you make yourself.

It may seem complicated to create your own code snippets, but it's pretty easy!

• First: Go to "User Snippets" in your VS Code "Preferences"

• Second: You'll be presented with a list to choose the type of snippet you want to create. Either a global one (for all projects or just one specific project) or one that is specific to a language.

• Third: Then write any code snippet you want, following this simple template provided by VS Code, where:

  • scope defines which language or project this code snippet will be used in.

  • prefix is the shorthand you will use to call on the code snippet.

  • body is the code snippet that will be injected.

  • and well description describes what the code snippet does.

  • $1 and $2 are placeholders for the code you will add to complete the snippet (you can move from one placeholder to another using the tab key).

"Print to console": {
     "scope": "javascript,typescript",
     "prefix": "log",
     "body": [
         "console.log('$1');",
         "$2"
     ],
     "description": "Log output to console"
}

That's it! Now you can inject this console.log() code snippet in any JavaScript file via the shorthand log.

#6. Emmet Snippets

Emmet is a markup expansion tool that allows you to write HTML in a blink. The following code ul>li.item$*5 will create this:

<ul>
 <li class="item1"></li>
 <li class="item2"></li>
 <li class="item3"></li>
 <li class="item4"></li>
 <li class="item5"></li>
</ul>

If you're using a different editor than VS Code, you'll have to download the plugin. However, if you're using VS Code, you'll be happy to know that Emmet Snippets come as a built-in feature. Neat! I KNOW! 😎

The Emmet team made a cheat sheet available here.

#7. Better Merge

Merge conflicts are common. 🙄 And resolving them can sometimes be quite annoying!

Well, there was this extension at some point that VS Code, fortunately, decided to add to its feature set.

Just like that, the life of millions of developers around the world changed forever. And since then (VS Code 1.13.0 version), we can pick the version we want to keep or delete and resolve merge conflicts with just a click of a button! #DramaQueen

Extensions

🤓 Now let's talk about extensions! You can find more than 14,000 extensions here on the VS Code Marketplace.

However, 😄 if you don't know where to start, here is a list of 17 extensions I use almost daily.

Note - just click on the corresponding header for a link to the extension!

#1. GitLens

GitLens is just this awesome must-have extension that shows you a code line or file history without having to go to your git repository and lets you examine the author and date update info of any given line of code your cursor is at.

This extension does so much more, but I mainly use it for these two features that already help me a lot.

#2. ESLint

Potential bugs can sometimes pop up because of an inconsistency or code error made a while ago in JavaScript (given the dynamic and loosely-typed nature of JavaScript).

That's why we need linting tools that check our code for suspect code patterns and styles to tell us what’s wrong. This ESLint VS Code extension does just that, and it's easy to set up and configure.

#3. Prettier

Prettier is an opinionated code formatting extension that supports the main languages and frameworks we use as web developers.

In other words, Prettier helps keep your code and your teammates' code consistent by automatically correcting code omissions and style errors. It's very efficient when used in conjunction with ESLint.

What happens after installing this VS Code extension is that whenever you save your code, it automatically formats its style to respect the rules you set.

#4. Vue VSCode Snippets

The awesome Sarah Drasner gave us this super useful extension that will make you feel like a 👩🏼‍💻 movie hacker because of how fast you'll be able to write Vue code.

A list of all the Vue VSCode Snippets is available on its GitHub repo.

#5. Bracket Pair Colorizer

It's too colorful, but it's useful! 🤷🏼‍♀️ Bracket Pair Colorizer is a VS Code extension that gives a different color to each couple of matching brackets. This allows you to avoid silly bugs by quickly identifying unclosed arrays or wrong bracket alignment.

#6. Auto Rename Tag

Are you tired of losing three seconds every time you rename a tag by having to look for its closing tag? Auto Rename Tag is this magic extension that modifies the closing tag of any HTML/XML tag you are renaming. 🤯

It blew my mind how handy this extension is!

#7. Project Manager

All my projects are in one place, easily accessible and managed without having to leave VS Code.

#8. Open in GitHub / Gitbucket

This extension has a very long name: Open in GitHub, Bitbucket, Gitlab, VisualStudio.com ! 😃Fortunately, the time I just lost writing its name, I make up for it with all the time I gain opening any repository file in the browser with a single command.

#9. Regex Previewer

Did you ever google regex previewer online? I know you did! 😉 Because I did until I discovered this VSCode extension that lets you preview your regex expressions in a side-by-side document.

#10. Import Cost

I already mentioned this tool in 10 Good Practices for Building and Maintaining Large Vue.js Projects. Import Cost helps you track the size of your third-party packages in just a glance right from your editor and see how big an imported module library is.

It's important because when a lot of people work in the same project, the number of installed packages can quickly become incredulously high if no one is paying attention to them. To avoid your application becoming slow (especially on slow mobile networks), I use the Import Cost extension in Visual Studio Code.

#11. Tiny PNG

TinyPNG is a tool that lets you use lossless compression on any jpg and png image inside VS Code's context menu.

#12. Settings Sync

If you use different devices to code like me, this is perfect for you. Setting Sync uploads your VS Code settings, including the extensions you've installed and your custom snippets to your GitHub account, and downloads them to your VS Code coding environment set up as soon as you log in. 🤯🤩

#13. Polacode

What an awesome little extension we have here! I use Polacode for all the screenshots I make of my code on my articles. Simple to use, and the output looks great. What do you want more than this?! 🤷🏼‍♀️

#14. Markdown Shortcuts

It does what it says: Provides shortcuts to make writing Markdown files feel like a breeze. I find this extension especially useful when I have to create tables in Markdown.

#15. Markdown Preview Enhanced

👀 As you can see, it's much more pleasant to look at a neat preview of your Markdown using this extension.

#16. WakaTime

Did you ever ask yourself how many hours you code every day or every week? Well, here it is! WakaTime even allows you to track your programming activity per project.

#17. Live Share

If you find Google Docs’ collaboration feature useful, then you will love this extension. Live Share allows you and your teammates to share and edit projects in real time. I mostly use it for debugging purposes when I'm stuck and need someone's help. 😁

What's Your Favorite?

Are there any other VSCode tips or extensions that you think we should add to this list? 🤓

Feel free to tell me in the comments below or to reach out to me on Twitter @RifkiNada. 🤠