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.

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

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.

How to set up plugin

4. Bracket Pair Colorizer2

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.

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.

How to set up plugin

6. Path intellisense

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

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.

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😏

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

Comments

[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.

[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.

yatki / vscode-surround

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

Surround

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 2: Wrapping multi selections

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 { ...

…

View on GitHub

Cheers, 🚀🖖

[𝐁𝐚𝐛𝐢 ✨]

Ok Mehmet, I'll give it a go

[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

[Prima Tondy Arya Kurniawan]

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

[𝐁𝐚𝐛𝐢 ✨]

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

[Ali Irandoust]

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

[𝐁𝐚𝐛𝐢 ✨]

You're welcome

[Vincent Amstoutz]

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

[𝐁𝐚𝐛𝐢 ✨]

You're welcome

[Mokerras]

Nice

[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

[𝐁𝐚𝐛𝐢 ✨]

Oh wow. Nice!

[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

[Peter Witham]

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

[𝐁𝐚𝐛𝐢 ✨]

Thanks!