Pro tips for Visual Studio Code to be productive in 2018 👨🏻‍💻
Tags: vscode, webdev, productivity, beginners
Published: 2018-12-20 11:07:15

---
title: Pro tips for Visual Studio Code to be productive in 2018 👨🏻‍💻
published: true
description: Visual Studio Code blows other programming text editors out of the water. It's free, lightning fast, and packed with productivity features.
tags: vscode, webdev, productivity, beginners
---

![](https://thepracticaldev.s3.amazonaws.com/i/i6lw3uuh2o3ymqsqdcdx.jpeg)

Over the last few years, [Visual Studio Code](https://code.visualstudio.com) has grown very popular over the open-source IDE market. VS Code was publicly released in 2015 and now used by 35% of all developers according to [2018 Stack Overflow survey](https://insights.stackoverflow.com/survey/2018/#development-environments-and-tools). In this article, I am going to share a few tips and tricks of VS Code that would help you to be productive.

### Git and Gitlens

![](https://thepracticaldev.s3.amazonaws.com/i/yjj4zrku7ffr8kxx1npg.gif)

[Git](https://git-scm.com) is the most popular software used by developers. Managing Git from your IDE is much easier than the command line. The Git panel allows you to stage, commit, stash, and undo changes. [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) extension for VS Code offers you much more. The most useful feature of GitLens is that it shows you who committed what and when on every line of code in the project.

### Live Share

![](https://thepracticaldev.s3.amazonaws.com/i/k436dokte9xs24z0ocsv.png)

[VS Code Live Share](https://visualstudio.microsoft.com/services/live-share/) is a brand new feature that is still just in developer preview. It allows you to share your workspace in realtime, live editing, pin to the user to follow their cursor, group debugging and many more. It’s really helpful if you work remotely or when you need to collaborate with someone who isn’t around.

### JSON to Code

![](https://thepracticaldev.s3.amazonaws.com/i/22c84qcx7z3ilpdpwjcv.gif)

Have you ever been working with an API in TypeScript and wished you could have its response strong-typed in your project? [Paste JSON as Code](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype) converts your JSON into an interface usable in strong-typed languages with a single command.

### Rename All Occurrences

![](https://thepracticaldev.s3.amazonaws.com/i/qs6egs2iem2u41y2h825.png)

Refactoring is a necessary aspect of writing and maintaining clean code, but it can be quite the headache — especially when you’re refactoring a large module or an otherwise huge chunk of code. So instead of hunting through dozens of files just to rename a variable or method, let VS Code do it for you.

If you select a variable/method and hit **F2**, you can edit the name and it will change every instance of that variable’s name throughout the entire current working project.

If you only want to change within the current file, use the **Command + F2 (on Mac)** or **Ctrl + F2 (on Windows)** keyboard shortcut and VS Code will spawn a cursor at every instance throughout the current file.

### Go to Definition

![](https://thepracticaldev.s3.amazonaws.com/i/sbrvamkki2xc36fp82rd.png)

When you’re programming or scripting, often times you’ll run into a variable or method that you don’t recognize. So what do you do? You could spend several minutes searching for the right file, or you could press **Command (on Mac)** or **Ctrl (on Windows)** key and click the variable/method with your mouse. VS Code will take you to its definition right away.

Or you could just hover your cursor over the variable/method along with pressing the **Command (on Mac)** or **Ctrl (on Windows)** key, it will show you the definition right in line where your cursor is.

### Edit Multiple Lines at Once

![](https://thepracticaldev.s3.amazonaws.com/i/e5wig14aoh3ntd13679g.png)

If you ever need to insert or delete multiple instances of text throughout a document, all you have to do is create **multiple cursors**. You can do this by holding down **Option (on Mac)** or **Alt (on Windows)** and clicking anywhere in the text. Every click creates a new cursor.

This is particularly useful for things like HTML, where you might want to add many instances of the same class or change the format of several hyperlinks.

### Debugger

[![](http://img.youtube.com/vi/6cOsxaNC06c/0.jpg)](http://www.youtube.com/watch?v=6cOsxaNC06c)

The debugger deserves a video all to iteself — thankfully, VS Code has already made one of those.

### Keybindings and the Command Pallette

![](https://thepracticaldev.s3.amazonaws.com/i/9kf52jokud2e5dkoqrdm.png)

If you want to get things done fast, memorize your hot keys. You can look over the essentials in the [cheat sheet](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf) or by opening the keybindings page.

The command pallette is your best friend. You can open it with **Command + P (on Mac)** or **Ctrl + P (on Windows)**. As a developer, you’re likely juggling many files simultaneously. Start typing the file name and get full-text search results from the workspace — so much faster than clicking through the directory tree.

* You can start typing with a > to get a list of available tasks.
* Or start with an @ to get a list of symbols in the current file.

### Custom Keybindings

![](https://thepracticaldev.s3.amazonaws.com/i/0r8qsc811i95i1zacxfo.png)

One useful keybinding missing from VS code is Save All. Let’s create our own keybinding to save all modified files in the workspace with **Command + Shift + S (on Mac)** or **Ctrl + Shift + S (on Windows)**.


If you find this helpful don’t forget to leave some claps 👏🏻 and don’t forget to share this with your friends and followers! If you have some tips regarding VS Code, feel free to comment

Btw I'm on Medium as well. Check it out [here](https://medium.com/@i_AnkurBiswas).