My Top Five Shortcuts in Visual Studio Code

As a consultant, I spent most of my time developing with Microsoft technologies for almost 20 years. I have loved Visual Studio (Interdev at one time) as my coding environment. Lately, I have been using a MacBook Pro to do some cross platform development, but never really found anything that fit well for what I was trying to do. Sure, TextMate was probably my best option…I just didn’t spend enough time in it to care to tweak it to my needs.

In April, Microsoft released Visual Studio Code as part of its //Build conference. I have been using it on my MBP for most of the coding I do on the Mac. I found a number of things I really like…particularly doing Node and JavaScript development. Best part is that it is cross platform, so I can run it on my Mac, Linux and Windows machines, and I have the same editing experience. With Git support built in out of the box, what more could I ask for? Well, here are the things I find save me the most time.

#1 Emmet Abbreviations

When you are creating a website that is going to be using dynamic content (or just creating a demo), and you don’t quite have access to what that content is yet…what do you do? You fake it. You put in dummy text, and dummy images. Microsoft Word has the feature of using “=rand(10,10)” to generate random content, but that doesn’t help me in my code editor. The focus is on the design, not the content. But running your fingers around on the keyboard for random text is kind of a waste of time and it doesn’t really yield result that shows “for placement only” type look. Besides, you need tags in there to get what you really wanted.

Here’s where Emmet abbreviations come in handy. A simple:

1

p*4>lorem

This will get you four paragraphs of random length “lorem ipsum” text. You know good ol’ Lorem right? You can always look here if you need a history lesson on filler texts and the like. This can get more complex by chaining them together. For example:

1

li*5>p.item*3>lorem10

That will produce five <li> tags with three <paragraph class=”item”> tags containing a random ten word text. Like so:

For more Emmet info, see the documentation here. Sure…this isn’t exclusive to Visual Studio…but I don’t have to do anything to install it and have it working everywhere.

#2 Selection and Multi Cursor Editing

This one is my editing dream come true. When I am refactoring code, I often find that I am adding or removing the same thing in multiple places. No…not duplication like bad code, but adding more descriptive name to items. Maybe it changing a series of properties like HomeAddress, HomeCity, HomeState, HomeZipCode and removing the “Home” piece of this. In the past, the column edit (Alt-shift) was a way to get this done. But now…WHOA! I can click in multiple lines of code in different columns and add or delete code simultaneously. This is done with the Alt-Click in the Code window.

Not only can I do the multi-select with the Alt-Click…I can select all the words that match what I am currently on. In this example, if I wanted to change the word “delorean” I could Ctrl-Shift-L the word and all instances are selected as in the next image.

#3 Hover in CSS files.

If the language supports it, hovering over symbols in your code will give you useful information. This really hasn’t been that big of deal for me except for when I am messing with CSS. If you have a lot of complex selectors in your CSS, it is helpful to see how a particular selector is being considered. In Visual Studio Code, I can hover over a selector and see the “hypothetical DOM” that would have this style applied to it. In this case the selector on line 44 would be applied to an element with a class of “sports-icon-list” that contained an anchor tag (<a>) with a heading six (<h6>) applied to it. Very useful to visualize it if I really meant to have a comma in there to apply to more elements.

#4 Bracket Match

So when you work with bracket based languages like C#, Javascript, and C++, you can easily get lost in the mire of missing brackets. For that matter, even if you want to move to the end of the code block, it can be challenging to know you are in the right place. With Bracket Match, you can easily click Ctrl-Shift-] and go directly to the end (or beginning) of a code block. This has saved me an immense amount of time working in my Node applications or messing with Javascript in general. Helpful that it uses the bracket in the keyboard shortcut too.

#5 Go To Definition

So I have been used to this in C# for quite some time now, but having it come to Javascript (and other languages). Here’s the cool thing…there are a number of ways to make it work. If you press Ctrl while hovering over a symbol, you will get a quick popup of the definition. A quick click while you are holding the control (Ctrl-Click) and you are now at that point in the code where the symbol was defined or Ctrl-Alt-Click to open the definition in a new side window. Unfortunately, there is no quick way to go back to where you were working, so I prefer the hover or the new side window approach to editing the files.