DEV Community

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

babib profile image Babi-B ・4 min read

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 overwhelming urge to test out every code editor there was, try out every shortcut and install every extension. Yeah, the excitement was immense!😅.

Here are some extensions that I have found truly useful in my learning journey.

PS: The text editor used here is visual studio codes...did I say that already?

1. Prettier

Prettier integrates with your editor, so your code is tidied up every time you save your changes. It makes the code more readable and consistent with your project's style guide.

Alt Text

How to set up Prettier plugin

2. Linked Editing

VS code now has a built-in, called linked editing, separate from auto rename tag extension for editing a tag when its matching closing tag is modified.The command to enable linked editing is Start Linked Editing (Ctrl+Shift+F2) and Escape disables linked editing mode.

Or on the UI, search for editor.linkedEditing your settings and enable it

image

Alt Text

How to set up plugin

3. Live server

This extension automatically refreshes the browser whenever you save your work. It is especially useful when working with html, css and js projects.

Alt Text

How to set up plugin

4. Bracket Pair Colorizer2

Alt Text

This extension matches a bracket pair with a unique color. You'll find this extension quite useful when browsing through your code especially when you have several scopes deep in your code.

Alt Text

How to set up plugin

5. Indent-rainbow

This extension increases the readability of your code and makes it easy to browse throught your work.

Alt Text

How to set up plugin

6. Path intellisense

This extension autocompletes file paths when referencing them in a link.

Alt Text

How to set up plugin

7. Material Icon Theme

Material Icon Theme makes icons more obvious to the eye. So you can quicky identify different files types from each other.

Alt Text

How to set up plugin

8. Theme

It's always nice to enjoy your coding experience and you could definitely spice it by adding a theme and the good news is the is a long list from which you could pick according to your taste.

Personally, I like the Palenight theme. It's quite elegant😏

Alt Text

How to set up plugin

Hey this is just a limited list of extensions you can find on VS code, there's so much more out there.

Comment down below on which extension you found(or think is) most useful as a beginner programmer.

Edited: Thank you all for the corrections in your comments.

                                          💞 Babi
Enter fullscreen mode Exit fullscreen mode

Discussion (37)

pic
Editor guide
Collapse
sami_hd profile image
Sami

I believe path intellisense is already supported

Collapse
babib profile image
Babi-B Author

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
Babi-B Author

Oh, ok thanks a lot 😊

Collapse
babib profile image
Babi-B Author

Hello Sami! Thanks for the correction 😊

Collapse
mrahmadawais 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
Babi-B Author

It makes a pretty gif.

Collapse
mrahmadawais 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
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
Babi-B Author

Thanks! I'll check it out

Collapse
syedumairali2000 profile image
Syed Umair Ali

Pale night for the win

Collapse
babib profile image
Babi-B Author

😄

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 Durante

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
Khalid shammout • 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
Babi-B Author

Yeah, it's a pretty dope plugin

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
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
Babi-B Author

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
Babi-B Author

Ok Mehmet, I'll give it a go

Collapse
rafaelrferreira profile image
Rafael R. Ferreira 🕹️🐕

Indent-rainbow is really helpful! ✔👍

Collapse
babib profile image
Babi-B Author

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
Babi-B Author

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
Babi-B Author

You're welcome

Collapse
vince_amstz profile image
Vincent Amstoutz

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

Collapse
babib profile image
Babi-B Author

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