DEV Community

Cover image for 5 VS Code Extensions That Make Refactoring Easy

5 VS Code Extensions That Make Refactoring Easy

Alex Omeyer on July 06, 2021

If you’re looking at ways to clean up our code, reduce complexity and improve functionality - these refactoring extensions will help you move faste...
Collapse
 
devfranpr profile image
DevFranPR • Edited

Step 1: Install Stepsize
Step 2: Mark the main project folder as technical debt
Step 3: Cry under your desk
:') :') :') :')

Collapse
 
zaxwebs profile image
Zack Webster

Lol, good one.

Collapse
 
alokjoshi profile image
AlokJoshiOfAarmax

Sorry but I do not understand? Do you dislike Stepsize?

Collapse
 
devfranpr profile image
DevFranPR • Edited

No! Stepsize awsome. My code is the real shit :D

Thread Thread
 
spiritfox358 profile image
spiritfox358

You have a incorrect word

Thread Thread
 
blindgaenger profile image
Bernd Jünger

so next install SonarLint ;)

Thread Thread
 
devfranpr profile image
DevFranPR

Stepsize 'is' awesome (?) If this is the typo it's suposed to have a coma between the two words for emphasis but I forgot it. Also I'm not a native so my sentences are not perfect so I'm open to bug reports if it helps me doing better in the future.

Thread Thread
 
blindgaenger profile image
Bernd Jünger

Don't worry, you're doing great. I'm not a native speaker either.

Collapse
 
httvhutceoscop profile image
Viet NT

LOL

Collapse
 
yatki profile image
Mehmet Yatkı

Hey Alex, thanks for your list. You may wanna take a look at this small extension of mine too :)

GitHub logo yatki / vscode-surround

🔥A simple yet powerful extension to add wrapper templates around your code blocks

Surround

Visual Studio Marketplace Visual Studio Marketplace GitHub last commit License


A simple yet powerful extension to add wrapper snippets around your code blocks

Features

  • Supports language identifiers 🚀New!
  • Supports multi selections
  • Fully customizable
  • Custom wrapper snippets
  • You can assign shortcuts for each wrapper snippets separately
  • Nicely formatted (Preserves indentations 🚀New!)
  • Sorts recently used snippets on top 🚀New!

Demo 1: Choosing a wrapper snippet from quick pick menu

Demo 1

Demo 2: Wrapping multi selections

Demo 2

How To Use

After selecting the code block, you can

  • right click on selected code
  • OR press (ctrl+shift+T) or (cmd+shift+T)

to get list of commands and pick one of them.

Hint

Each wrapper has a separate command so you can define keybindings for your favorite wrappers by searching surround.with.commandName in the 'Keyboard Shortcuts' section.

List of commands






















Command Snippet

surround.with (ctrl+shift+T)
List of all the enabled commands below
surround.with.if if ($condition) { ... }
surround.with.ifElse if ($condition) { ... } else { $else




Cheers, 🚀🖖

Collapse
 
alexomeyer profile image
Alex Omeyer

Nice, thanks for sharing!

Collapse
 
alokjoshi profile image
AlokJoshiOfAarmax

Checked it out. I always needed something like this. Thanks

Collapse
 
omril321 profile image
Omri Lavi

Hey Alex, thanks for the useful list!
Can you please share more details about SonarLint? How/why is it better than other tools like ESLint (for example)?
Also, I see you're the Co-founder & CEO at Stepsize - doesn't it worth mentioning it somewhere in the list? ;)

Collapse
 
lgrammel profile image
Lars Grammel

Great list!

I've developed another refactoring extension that mostly focusses on code modernization for JS & TS: marketplace.visualstudio.com/items...

Would be curious what you think, maybe it's a good addition to your list :)

Collapse
 
alexnaiman profile image
Alexandru Naiman

Is the first time (in a long time) when I see this type of article and it is actually useful; most of the time I feel like "top 5 [blank] vscode thing" are just copies of each other that just point out the most used extensions ever. I get it, they are useful, but I cannot imagine you didn't heard of eslint, gitlens or other thing like that. Nice job

Collapse
 
rafajrg21 profile image
Rafael Romero

Good list! Glean is a godsend for me, I was refactoring some code in work last month and the time I would have saved if I just used Glean back then! 😅 Thanks for sharing

Collapse
 
naveenchandar profile image
Naveenchandar

👏👏👏

Collapse
 
gleisser profile image
Gleisser

Really useful, some I havent heard before

Collapse
 
obaino82 profile image
Obaino82

Nice one

Collapse
 
anirseven profile image
Anirban Majumdar

This is really helpful , thank you for sharing these.

Collapse
 
mogaozq profile image
Mohammad Barbast

I would prefer to do above tasks manually or using vs code built-in features. It's not that hard to use another library.

Collapse
 
omril321 profile image
Omri Lavi

Hey Alex, thanks for the list!
Can you please share more details about SonarLint? How/why is it better than other tools like ESLint (for example)?

Collapse
 
hybridappdev profile image
Sandy

I liked Glean, Stepsize and already using SonarLint

Collapse
 
sanjivj profile image
sanjivj

Wouldn't Anracadabra get in the way of more specific tools like Glean and Javascript Booster?