hexrcs

Posted on Aug 8, 2019 • Edited on Jul 31 • Originally published at xiaoru.li

5 Visual Studio Code Tricks to Boost Your Productivity

#productivity #vscode #tutorial #tools

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

#1 - Refactoring With "Rename Symbol"

We don't always give variables, functions or attribute keys the right name they deserve when we first come up with them. Quite often, when we are doing refactoring, we need to rename some of those to better ones.

Say we want to change a dictionary/object foo to counter in our code, but it has already been used numerous times throughout the entire project, across many different files. We also would like to change its attribute key bar to value, so that we have counter.value instead of foo.bar. How do we proceed?

A naive way to do that is to simply to do a global search-and-replace via the search panel (shift + cmd + F on macOS, or shift + ctrl + F on Windows and Linux). That can be swift, but can also be unsafe - if we happen to have another variable called food, then the simple replacement would take effect on this variable too. counterd, oops!

These named entities are called "symbols". And the most straightforward and "correct" way to do this is to use the "rename symbol" feature in VS Code. Place the cursor on the "symbols" that we want to rename, then hit F2 (also on macOS). We will be greeted with a text field next to the symbol we want to rename. This way, all references to this name throughout the entire project will be correctly renamed. If we use this on a React component, the JSX markup tag will be renamed too!

#2 - Shortcuts For Editing

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

Have you noticed 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 to duplicating and moving lines around.

alt + up or alt + down will simply move the line your cursor is currently placed 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. On some Linux distros though, these combinations might conflict with the default systemwide keymapping. In that case, you will have to reassign them in VS Code's settings.

The best thing ever however, is shift + ctrl + cmd + right/left for expanding or shrinking block 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 in VS Code is its multi cursor support. If you have used Sublime before, you already know how dope this is!

First of all, we can use alt + mouse click to insert cursors. If you made a mistake somewhere, you can use cmd + U or ctrl + U to undo the cursor insertion. If the text blocks 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 the next occurrence of the word (text separated by spaces or special characters) currently 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 when working with markup languages!

#4 - Fast Keyboard Navigation

Navigating with the keyboard is a breeze. You can use:

ctrl + G (on macOS too) to Go To Line...
ctrl + P (replace ctrl with cmd on macOS this time!) to Go To File...
ctrl + shift + O (replace ctrl with cmd on macOS) to Go To Symbol....

Man, I love the third one! It will bring you right to where you declared that function or variable - the symbol. You can then take it from there. 😉

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

#5 - DIY Code Snippets

If you have been using VS Code for a while, you may have got some code snippet extensions already installed from the marketplace. Code snippets are shorthands that you can type to expand to entire pieces of code. They are also often smart enough to 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. Making our own code snippets for VS Code is 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 shorthand 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 which you can use Tab key to jump to when the snippet is invoked. To move the cursor outside the snippet and make Tab key go back to normal, just press Esc.

Bonus - Install 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!

The extension currently supports JavaScript, TypeScript, Python, and Java. Having coded with IntelliCode since its preview release, this little extension has been a huge time + frustration saver for me! :)

Originally posted on my blog, where I publish random stuff on web dev, flutter and sometimes ML every two weeks or so.

You can also find me on Twitter @hexrcs :)

Top comments (28)

kiranjd • Aug 9 '19

They are very helpful. Here's another article that really made me happy working in VS Code: freecodecamp.org/news/here-are-som...

hexrcs • Aug 12 '19

Good one!

Aaron B • Aug 13 '19

#1 - Refactoring With "Rename Symbol"

This one did not work as described. When using this feature with Javascript, it only changed the name of the reference in the current module and aliased the import.

import { MyModule } from './module'

export function main() {
  const foo = new MyModule();
}

Became

import { MyModule as Foo } from './module'

export function main() {
  const foo = new Foo();
}

The export in the module itself didn't change.

hexrcs • Aug 13 '19 • Edited

This does work for JS. If you want to rename the exports in other files like here, you must use F2 on the MyModule in the ~~import statement~~ export statement of the file it originates from. However if you want to rename say MyModule.foo to MyModule.bar, you can rename it anywhere.

This is because named/aliased import is valid JS syntax, and VSCode does the renaming conservatively, so it tries to change as few things as possible. If this is an import from an NPM module, it wouldn't make sense to change the exports of some files in the node_modules directory.

Aaron B • Aug 14 '19

Thanks for your response!

Ok, I've figured this out. Using F2 outside the place it's declared will alias it. Doing it on the import statement will also alias it.

e.g. Using F2 anywhere in this file

someFile.js

import { Clock } from './clocks'

const c = new Clock();

will result in

import { Clock as C } from './clocks'

const c = new C();

On the other hand, if you use it where it's exported it will look for all instances of it in your code and replace it.

e.g.

clocks.js

export class Clock {
  // stuff
}

someFile.js

import { Clock } from './clocks'

const c = new Clock();

Would become

clocks.js

export class C {
  // stuff
}

someFile.js

import { C } from './clocks'

const c = new C();

hexrcs • Aug 14 '19 • Edited

You're right, I didn't realize that, thanks! I guess the reason is indeed because that "blindly" renaming on import statements will mess up external stuff that we might consider static (eg. installed NPM modules).

Aaron B • Aug 14 '19

Yeah! When you said:

VSCode does the renaming conservatively

It sort of made it click for me! Anyway, thanks for your article and response! Following now!

Nicolas Carlo • Aug 13 '19

Nice advices, thanks for sharing. I discovered these progressively, and they make me save so much time today!

As for points #1 and #2, I'm working on a VS Code Extension to go even further! The idea is to provide automated refactorings to save me some time on the thing I frequently do (just like "Rename Symbol").

Maybe you'd be interested in checking it out.
It's called Abracadabra: bit.ly/vscode-abracadabra

Related to #2: with alt + up and alt + down you can move lines up / down indeed. But sometimes, you'd like to move a statement above / below another one. Like, to switch from:

const oldNode = { 
  type: "identifier",
  loc: {
    start: 0,
    end: 10
  }
};

const newNode = { 
  type: "expression",
  loc: {
    start: 14,
    end: 20
  }
};

to the following:

const newNode = { 
  type: "expression",
  loc: {
    start: 14,
    end: 20
  }
};

const oldNode = { 
  type: "identifier",
  loc: {
    start: 0,
    end: 10
  }
};

in a single keystroke. Moving lines up/down will mess things up until you're done, because the two objects would "merge". Thus, we tend to cut & paste indeed.

With Abracadabra, I'm working on a "Move Statement Up/Down" so you can swap them with Ctrl + Shift + Up for instance 😁

Well, that's one example. If you feel like trying it, I'd love to get your feedbacks so I can make it better!

Anyway, thanks for this article. Have a great week 👋

hexrcs • Aug 13 '19

This looks super cool. Thanks for making this!

Jacque Schrag • Aug 9 '19

Great post!

For people interested in making their own snippets & find the snippet editor confusing, you can use this awesome Snippet Generator. Works for VS Code, Sublime Text, and Atom!

hexrcs • Aug 9 '19 • Edited

Looks pretty useful, thanks for sharing!

Clinton Gallagher • Aug 13 '19

I'd settle for a stable release that can rename files without tricky shit like sending it to Windows Explorer to rename or like having to close and restart the editor.

Can this be a conflict with extensions? If so then we get into WordPress madness disabling all "plugins" and reenabling until the offending plugin is discovered: or not.

hexrcs • Aug 13 '19 • Edited

Can you elaborate?

Every feature listed here in this article already exists since the very early versions of VSCode.

What extensions do you use? It's possible that there're keybinding conflicts. Check this out for detecting conflicts - code.visualstudio.com/docs/getstar...

Clinton Gallagher • Aug 13 '19

What's to elaborate? From time to time VSCode will not rename a file in a workspace. This issue has been found by googling but no clear reason or solution as of late.

I've found this Managing Extensions document code.visualstudio.com/docs/editor/...

I have way too many extensions installed and its time to play the WordPress game.

hexrcs • Aug 13 '19 • Edited

I have never encountered file renaming issues (I use stable release on macOS, Linux, and insider on Windows, all with 40+ extensions, from syntax highlighters to diagram generators), but it's always a good idea to install as few extensions as possible since they can affect startup time as well. Always know your needs, and what you are installing. :)

You can always submit an issue to the VSCode project on GitHub.

Shuhaid Lambe • Oct 1 '19

Thanks for posting this. Always good to get refresher of the cool productivity hacks in VS Code. Not sure if its just my setup but for #1 Refactoring With "Rename Symbol" Ctrl + F2 worked instead of just plain F2. BTW this from my windows machine.