DEV Community 👩‍💻👨‍💻

Ankur Biswas
Ankur Biswas

Posted on • Updated on

Pro tips for Visual Studio Code to be productive in 2018 👨🏻‍💻

Over the last few years, Visual Studio Code 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. 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

Git 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 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

VS Code 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

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 converts your JSON into an interface usable in strong-typed languages with a single command.

Rename All Occurrences

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

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

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

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

Keybindings and the Command Pallette

If you want to get things done fast, memorize your hot keys. You can look over the essentials in the cheat sheet 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

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.

Top comments (23)

Collapse
 
dance2die profile image
Sung M. Kim

Edit Multiple Lines at Once is what blew me away 😮 when I saw Wes Bos editing multiple lines of React components at once in VS Code .

And this time you blew me away at JSON to Code 🕺.

Collapse
 
nickjj profile image
Nick Janetakis • Edited on

You can take the multiple lines tip one step further and jump to the beginning or end of each line with a hotkey too (very handy for CSV files).

Here's a demo I recorded a few months ago: youtube.com/watch?v=_u-Uuw3GhCQ

Collapse
 
dance2die profile image
Sung M. Kim

That video makes you feel like editing texts using your thoughts almost 😲

Collapse
 
iankurbiswas profile image
Ankur Biswas

Thanks for sharing this video. This is really a pro tip of how we could use multiple line editing.

Collapse
 
jyarnell profile image
James Yarnell

Agree about multiple lines. I always use Ctrl/Cmd + D after selecting text to change multiple instances but this will be nice.

Collapse
 
maciek134 profile image
Maciej Sopyło

You guys do realize that multiline editing has been a feature of pretty much any IDE for at least 7-8 years, right? I like VSCode but let's not make it look like they made some breakthrough with this.

Thread Thread
 
mykeg profile image
MyKeg

Came here to say that too. My muscle memory prefers the way Visual Studio and Notepad++ has done it for years. Put the caret at a place on the line, and hold ALT-SHIFT and press UP or DOWN, and that will put the caret insertion/deletion point on multiple lines. Then type or delete or do whatever to do it on each of the lines. But in VS Code, it duplicates lines - same key commands, but completely different result. :(

Collapse
 
iankurbiswas profile image
Ankur Biswas

Glad you liked it 🙂

Collapse
 
kjmitch profile image
Kyle Mitchell

It would have been good to update this post, or at least change it to read '2019', before reposting it so late in 2018. (I thought it was a typo until I saw the original Medium post was made in August.)

It's important to note, the Command Palette is opened by default with Ctrl/Cmd + Shift + P. The chord Ctrl/Cmd + P will bring up a "Quick Open" input in the same location, but most of what I need there I can do in the Command Palette without using prefix characters. Of course, any of these bindings can be looked up and changed from the Keyboard Shortcuts preferences page, reachable with Ctrl/Cmd + K Ctrl/Cmd + S.

Collapse
 
prameshbajra profile image
Pramesh Bajracharya

That Live Share is what I really would love to try.

Collapse
 
iankurbiswas profile image
Ankur Biswas

Glad could help 😊

Collapse
 
rafalpienkowski profile image
Rafal Pienkowski

FYI you could have a Live Share session across VS Code and VS professional/enterprise as well. It’s also working cross-OS (Windows/Linux) :)

Collapse
 
prameshbajra profile image
Pramesh Bajracharya

Awesome. Thanks for the info.

Collapse
 
henrique profile image
Henrique Macedo

One thing we can't forget is the Prettier plugin. We just need to focus on writing code, save, and buumm... code is formatted. It's magic!

Collapse
 
iankurbiswas profile image
Ankur Biswas • Edited on

Thanks for sharing your opinion. Prettier does make our job easier when it comes to code indentation. But you've to remember that, Prettier doesn't support languages like Python, Ruby, Swift, PHP, Java. They're currently working on these languages.

Collapse
 
emmabostian profile image
Emma Bostian ✨

Great article! And very useful considering the popularity of VSCode :)

Collapse
 
iankurbiswas profile image
Ankur Biswas

Glad you liked it 😁

Collapse
 
geshan profile image
Geshan Manandhar

Did you mean 2019 and not 2018 :)

Collapse
 
iankurbiswas profile image
Ankur Biswas

I guess what I meant was, from 2018 onwards 😋😜

Collapse
 
bolah2009 profile image
Buari Bola Ahmed

Nice one... Helpful article.

Collapse
 
iankurbiswas profile image
Ankur Biswas

Glad you liked it 😁

Collapse
 
bardware profile image
Bernhard Döbler • Edited on

Does Go to Definition work for any language?

Collapse
 
iankurbiswas profile image
Ankur Biswas

Yes 👍🏻

Timeless DEV post...

How to write a kickass README

Arguably the single most important piece of documentation for any open source project is the README. A good README not only informs people what the project does and who it is for but also how they use and contribute to it.

If you write a README without sufficient explanation of what your project does or how people can use it then it pretty much defeats the purpose of being open source as other developers are less likely to engage with or contribute towards it.