DEV Community

Cover image for VS code Plugins and built-ins to boost productivity (with previews)

VS code Plugins and built-ins to boost productivity (with previews)

𝐁𝐚𝐛𝐢 ✨ on April 13, 2021

Are you trying to setup your workspace so as to ease your work and boost your productivity? This is for you When I started out, there was an overw...
Collapse
 
sami_hd profile image
Sami

I believe path intellisense is already supported

Collapse
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

Sami no it isn't in VS code. It's a plugin.

However, editors like brackets do

If you have doubts check this stackover question

Collapse
 
aravindvnair99 profile image
Aravind V. Nair

@babib VS Code has built-in support. The link you added is an old one. Auto Rename Tag isn't needed either. It's built-in. @sami_hd is right.

Thread Thread
 
sbrevolution5 profile image
Seth A Burleson

You can enable it by searching your settings for editor.linkedEditing
see here

Thread Thread
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

Oh, ok thanks a lot 😊

Collapse
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

Hello Sami! Thanks for the correction 😊

Collapse
 
ahmadawais profile image
Ahmad Awais ⚡️ • Edited

I am a little confused by the fact that you used Shades of Purple VSCode theme's gif in the featured image and didn't mention it in the article at all. 🤔

Collapse
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

It makes a pretty gif.

Collapse
 
ahmadawais profile image
Ahmad Awais ⚡️

Doesn't make it OK. I'd suggest either you mention the theme or remove my theme's gif as otherwise it's misleading.

Collapse
 
gulajavaministudio profile image
Gulajava Ministudio

Nice article with list useful vs code extension.

You forgot to try Gitlens and Git Graph for Git operation in VS Code.

Also maybe you can try Mayukai Theme with balanced syntax coloring

Collapse
 
parenttobias profile image
Toby Parent

Along with the LiveServer extension, I also strongly recommend the MongoDB for VS Code extension. Having a live playground for database documents, being able to live-edit them and view changes as my projects make them? It's huge.

Collapse
 
ckoulatsi profile image
Carlos Koulatsi

If you write JavaScript try quokka.
quokkajs.com/

Collapse
 
nemo011 profile image
Nemo

Quokka is awesome!

Collapse
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

Thanks! I'll check it out

Collapse
 
syedumaircodes profile image
Syed Umair Ali

Pale night for the win

Collapse
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

😄

Collapse
 
dshung1997 profile image
Sy Hung Doan

I installed Bracket Pair Colorizer2 and using it in a 400+ line file was not a good experience. It was kinda lagging when I tried to type a bit fast. All the colored lines were rendered, which I guess, spoiled the performance

Collapse
 
xapuu profile image
Xapuu

The bracket pair colorizer is definitely a must

Collapse
 
emmanuele_d profile image
Emmanuele D

The auto-rename tag is actually pretty good! ill get it as soon as i get to my pc !

Collapse
 
mohamed_kerras profile image
Mokerras

Nice

Collapse
 
5alidshammout profile image
5alidshammout • Edited

I think Kite copilot is great, it really helps me code.
and it's supported in VS code, Android studio, Atom, Sublime Text, and Vim

Collapse
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

Yeah, it's a pretty dope plugin

Collapse
 
filgeary profile image
Georgiy Filippov

I discover new useful extension for JS - 'Template String Converter'.
Description: Converts quotes to backticks when a $ and { are entered within quotes in JavaScript and TypeScript files

Collapse
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

Oh wow. Nice!

Collapse
 
peterwitham profile image
Peter Witham

Great collection. I love using indent rainbow to see where I am at inside code.

Collapse
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

Thanks!

Collapse
 
yatki profile image
Mehmet Yatkı

Hey there, thanks for the list. You may wanna try this little extension of mine too :) I've just released a new version.

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
  • 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 }
surround.with.tryCatch try { ...




Cheers, 🚀🖖

Collapse
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

Ok Mehmet, I'll give it a go

Collapse
 
rafaelrferreira profile image
Rafael R. Ferreira 🕹️🐕

Indent-rainbow is really helpful! ✔👍

Collapse
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

Yes absolutely!

Collapse
 
primakurniawan profile image
Prima Tondy Arya Kurniawan

so does it mean okay to uninstall auto rename tag/auto close tag?

Collapse
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

Yes. To use the in built one you'll have to make sure it's activated though

Collapse
 
vinceamstoutz profile image
Vincent Amstoutz

Thanks, I knew them all except Indent-rainbow 🙂👍

Collapse
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

You're welcome

Collapse
 
trumbitta profile image
William Ghelfi

I recommend Peacock if you keep more than 1 workspace window open at the same time

Collapse
 
irandoust profile image
Ali Irandoust

I didn't know about 2 & 5, they help a lot! Thanks.

Collapse
 
babib profile image
𝐁𝐚𝐛𝐢 ✨

You're welcome