6 Visual Studio Code Tricks to Boost Your Productivity

January 27, 2019

(Title of this article feels like having a click-baiting vibe haha!)

VS Code is perhaps the most popular free and open source code editor/lightweight IDE in the world right now. Here are 6 VS Code tricks that are guaranteed to boost your productivity!

#1 - Rename Symbol

We don’t always give variables, functions or attribute keys the best name they deserve the moment we come up with them. Sometime later, we might want to refactor the code and change the name of some of those symbols.

Now we want to change dictionary/object foo to awesome, but it has already been used 42 times throughout the project, across many different files. We also would like to change its attribute key baz as in foo.baz to qux. How do we proceed?

One way to do that is to simply to a global replacement via the search panel (shift + cmd + F or shift + ctrl + F). That can be swift, but can also be unsafe - if we happen to have another variable called foobar, then the simple replacement would take effect on this variable too. awesomebar!

The “correct” way to do this is to rename the symbol itself by placing the cursor on the name we want to replace, then hit F2 (on macOS too). This way, all the references to this name throughout the project will be correctly renamed. If you are using this on a React component, this will update the tag names inside JSX markups too!

#2 - Shortcuts For Editing

An editor is not only where we type things - it’s also where we move chunks of text around.

Have you notice that if you hit the standard copy/paste/cut shortcuts without selecting anything, VS Code will invoke that action on the whole line? This is great for editing entire lines of text.

There are also other shortcuts dedicated for duplicating and moving lines around.

alt + up or alt + down will simply move the line your cursor is currently place on up or down. shift + alt + up or shift + alt + down will duplicate the line and place it above or below the current line. These shortcuts also work when you have selected multiple lines.

The best thing ever however, is shift + ctrl + cmd + right/left for expanding or shrinking selection. Try it out in the middle of a nested code block and you will know what I mean. The Windows/Linux equivalent is shift + alt + right/left

#3 - Multi Cursor Magic

One of my favorite productivity trick within VS Code is its multi cursor support. If you have used Sublime before, you’ll know this is black magic!

First of all, we can use alt + mouse click to insert cursors. If you made a mistake somewhere, use cmd + U or ctrl + U to undo the cursor insertion. If the text sections we want to multi-select are already neatly aligned vertically, we can just use cmd + alt + up or cmd + alt + down (replace cmd with ctrl on Windows or Linux) to insert cursors directly above or below the current position.

If you want to select next occurrence of the word (text separated by spaces or special characters) under cursor or text of the current selection, cmd + D will do the job.

Super neat for doing mass rename, delete or copy paste, especially working with markup languages!

#4 - Fast Keyboard Navigation

The most useful ones I find are ctrl + G (on macOS too) for Go To Line… or ctrl + P (yes, macOS too) for Go To File…, as well as cmd + shift + O (replace cmd with ctrl on Winux) which is for Go To Symbol…. Man I love the third one! It will bring you right to where you declared that function or variable, and you can take it from there.

Another nice shortcut is ctrl + - or shift + ctrl + - on Mac (alt + left/right on Windows/Linux) to just back or forth to previous cursor location, ideal to be combined with those Go To commands!

#5 - DIY Code Snippets

If you have already been using VS Code for a while, you may have got some code snippet extensions already installed from the marketplace. Code snippets are abbreviations that you can type to expand to entire pieces of code, often smart enough to also place your cursor right at the key positions where you can directly change the placeholder function name or similar things.

But, the code snippets that suit you the best are always going to be handmade and homebrew. DIY code snippets for VS Code is actually not that hard at all!

Just go to the Code > Preferences > User Snippets on a Mac or File > Preferences > User Snippets on a Windows/Linux, and you can select a language (or global scope) you can write your own snippets!

Snippets follow this format:

{
  // ...
  "Name of the snippet": {
    "prefix": "helo", // the abbreviation to invoke the snippet
		"body": [
      "print('Hello, $1');",
			"$2"
		],
		"description": "Prints 'Hello, blahblahblah' to terminal"
  }
  // ...
}

Note that the $1, $2 etc. simply means placeholder key positions where you can use tab key to jump to when the snippet is invoked. In order to move the cursor outside the snippet and make tab key go back to normal, just press esc.

#6 - The IntelliCode Extension

Microsoft has recently launched a more advanced intellisense extension for VS Code, powered by machine learning. Check it out from their extension marketplace!

Although the extension still has “preview” in its title, it already supports JavaScript, TypeScript, Python and Java. Having coded with IntelliCode in Python and JavaScript, I have to say the recommendations made this are really smart! Definitely a time and frustration saver for me. :)