DEV Community

Cover image for 5 Visual Studio Code Tricks to Boost Your Productivity
hexrcs
hexrcs

Posted on • Updated on • Originally published at xiaoru.li

5 Visual Studio Code Tricks to Boost Your Productivity

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"
  }
  // ...
}
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
kiranjd profile image
kiranjd

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

Collapse
 
hexrcs profile image
hexrcs

Good one!

Collapse
 
aburd profile image
Aaron B

#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.

Collapse
 
hexrcs profile image
hexrcs • 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.

Collapse
 
aburd profile image
Aaron B

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();
Thread Thread
 
hexrcs profile image
hexrcs • 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).

Thread Thread
 
aburd profile image
Aaron B

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!

Collapse
 
nicoespeon profile image
Nicolas Carlo

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 👋

Collapse
 
hexrcs profile image
hexrcs

This looks super cool. Thanks for making this!

Collapse
 
clintongallagher profile image
Clinton Gallagher

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.

Collapse
 
hexrcs profile image
hexrcs • 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...

Collapse
 
clintongallagher profile image
Clinton Gallagher

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.

Thread Thread
 
hexrcs profile image
hexrcs • 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.

Collapse
 
jnschrag profile image
Jacque Schrag

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!

Collapse
 
hexrcs profile image
hexrcs • Edited

Looks pretty useful, thanks for sharing!

Collapse
 
shuhaid profile image
Shuhaid Lambe

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.

Collapse
 
arthuralves profile image
Arthur Alves

OMG the first one is so helpful!!!
Thank you!
Keep writing

Collapse
 
hexrcs profile image
hexrcs

Very glad that it helped you! 😁

Collapse
 
michaelhonan profile image
Michael

Cmd + P does do Go To File. Ctrl + P just moves the cursor up a line.

Collapse
 
hexrcs profile image
hexrcs

My bad, fixed!

Collapse
 
diogoppedro profile image
Diogo Pacheco Pedro

Great post thanks

Collapse
 
mdhesari profile image
Mohammad Fazel

thanks. it was so handy tricks for a good life :))