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)

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

Top comments (37)

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!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.