loading...
Cover image for My Top 10 VS Code Extensions

My Top 10 VS Code Extensions

bhagatparwinder profile image Parwinder πŸ‘¨πŸ»β€πŸ’» Updated on ・3 min read

Productivity with Parwinder (3 Part Series)

1) My Top 10 VS Code Extensions 2) Top 10 VS Code Settings 3) VS Code: Why and How

Today, I am going to take a slight break from writing about JavaScript and re-visit my favorite editor, Visual Studio Code or VS Code. We are going to go over my top 10 extensions.

Andromeda

Andromeda is technically not an extension but a theme for VS Code. I do not change themes every day. I spent a lot of time hunting for the theme that I like and this is what I settled on. Great readability. The theme works great with fonts like Operator Mono or Catograph Mono.

If you are not planning to shell out too much money for Operator Mono, I would suggest getting Dank Mono (my font of choice at the moment).

Andromeda Theme

Github: https://github.com/EliverLara/Andromeda

Auto Close Tag

Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does. From VS Code 1.16, it has built-in close tag support for HTML, Handlebars and Razor files. This extension adds auto-closing to other languages like XML, PHP, Vue, JavaScript, TypeScript, JSX, TSX and so on.

Auto Close

Github: https://github.com/formulahendry/vscode-auto-close-tag

Auto Rename Tag

Automatically rename paired HTML/XML tag, same as Visual Studio IDE does. With this extension, when you rename one HTML/XML tag, automatically rename the paired HTML/XML tag.

Auto Rename

Github: https://github.com/formulahendry/vscode-auto-rename-tag

Markdown All in One

If you work with Markdown as much as I do (like writing this blog), this is a must-have. All you need for Markdown (keyboard shortcuts, table of contents, auto preview and more).

Major features I ❀️

  1. Keyboard shortcuts to stylize text
  2. Adding a table of contents and automatically updating it
  3. Printing Markdown to HTML

Markdown All in One

Github: https://github.com/yzhang-gh/vscode-markdown

open in browser

This allows you to open the current file in your default browser or application.

open in browser

Github: https://github.com/SudoKillMe/vscode-extensions-open-in-browser

Output Colorizer

Language extension for VSCode that adds syntax colorization for both the output/debug/extensions panel and *.log files. Makes reading those logs easy on the eye. Works with almost any theme out there.

Output Colorizer

Github: https://github.com/IBM-Cloud/vscode-log-output-colorizer

Polacode

Create gorgeous screenshots of your code, complete with VSCode settings, fonts and theme. It is super helpful when I am creating documentation or presentations where I have to showcase code without switching context to my code editor (for example, working with business stakeholders).

Polacode

Github: https://github.com/octref/polacode

Presentation mode

A simple plugin to show your code properly in a presentation. You can change the zoom level in presentation mode in your settings. I have my zoom level set to 3. I use this for presentations where I am actively navigating code or teaching a topic.

Presentation mode

Github: https://github.com/jspolancor/presentation-mode

Rainbow CSV

Every now and then a software engineer has to work with CSV files. Be it a client that only works with CSV or an archaic system that was built around them. Rainbow CSV makes CSV files readable. Highlight CSV and TSV files in different colors, Run SQL-like queries.

Rainbow CSV

Github: https://github.com/mechatroner/vscode_rainbow_csv

vscode-spotify

I barely know a developer that does not listen to music while coding or during a break. vscode-spotify allows you to control Spotify without leaving VS Code.

vscode-spotify

Github: https://github.com/ShyykoSerhiy/vscode-spotify

Productivity with Parwinder (3 Part Series)

1) My Top 10 VS Code Extensions 2) Top 10 VS Code Settings 3) VS Code: Why and How

Posted on by:

bhagatparwinder profile

Parwinder πŸ‘¨πŸ»β€πŸ’»

@bhagatparwinder

Happy, cheerful, confident. Web developer based out of Chicago :)

Discussion

markdown guide
 

For Autoclose tag I would replace it with Emmet plugin.
It expands things like: ul>li*2 into:

<ul>
<li></li>
<li></li>
</ul>

There are tons of things you can specify and generate html really quicky.

 

Emmet is definitely great. Autoclose is one-off tags you might be writing or if you are not used to Emmet. Thanks for the feedback ❀️

 

Great List!


  • Instead of polacode, I use codesnap! It has few configuration things and I personally like codesnap! (Another alternative -> carbon.now.sh)

  • We can use Zen mode Ctrl + K Z instead of an extension like presentation! Reducing the number of extensions running background.

 

Thanks! Zen Mode is what I use for coding. For presentation, especially on projectors (640x480), I have to stick with the Presentation plugin otherwise the code is not legible. I could manually zoom in when presenting, though.

 

Ohh! Then I try presentation mode!
Thank you bro!

 

Akin to the rainbow csv plugin (good find btw) There are several extensions that also colorize your brackets and braces -

 

Bracket Pair Colorizer is a godsend. It should be in VS Code by default. I will have to check out Rainbow Brackets.

I have about 42 extensions and I didn't want to list all of them so I had to pick 10 carefully.

 

I used Rainbow Brackets in Android Studio/IntelliJ for years, I'm so happy there is an equivalent for VSCode !
Thanks