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
Β 
syedumaircodes profile image
Syed Umair Ali β€’

Pale night for the win

Collapse
Β 
babib profile image
ππšπ›π’ ✨ β€’

πŸ˜„

Collapse
Β 
ckoulatsi profile image
Carlos Koulatsi β€’

If you write JavaScript try quokka.
quokkajs.com/

Collapse
Β 
babib profile image
ππšπ›π’ ✨ β€’

Thanks! I'll check it out

Collapse
Β 
nemo011 profile image
Nemo β€’

Quokka is awesome!

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
Β 
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
Β 
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
Β 
rafaelrferreira profile image
Rafael R. Ferreira πŸ•ΉοΈπŸ• β€’

Indent-rainbow is really helpful! βœ”πŸ‘

Collapse
Β 
babib profile image
ππšπ›π’ ✨ β€’

Yes absolutely!

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
Β 
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
Β 
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
Β 
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
Β 
irandoust profile image
Ali Irandoust β€’

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

Collapse
Β 
babib profile image
ππšπ›π’ ✨ β€’

You're welcome

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