DEV Community

5 Visual Studio Code Tricks to Boost Your Productivity

Xiaoru Li on August 08, 2019

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

Read full post

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

Xiaoru Li • 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.

Xiaoru Li • 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();

Xiaoru Li • 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 👋

Xiaoru Li • Aug 13 '19

This looks super cool. Thanks for making this!

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.

Xiaoru Li • 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.

Xiaoru Li • 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.

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!

Xiaoru Li • Aug 9 '19 • Edited

Looks pretty useful, thanks for sharing!

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.