My Top 10 VS Code Extensions
Tags: beginners, productivity, vscode, webdev
Published: 2020-07-01 03:51:03

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](https://marketplace.visualstudio.com/items?itemName=EliverLara.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](https://dank.sh/) (my font of choice at the moment).

![Andromeda Theme](https://dev-to-uploads.s3.amazonaws.com/i/qts1tspjq1u2c5mp14cf.png "Andromeda Theme")

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

## [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.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](https://dev-to-uploads.s3.amazonaws.com/i/kvpuronlgus8sbp17803.gif "Auto Close")

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

## [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.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](https://dev-to-uploads.s3.amazonaws.com/i/5m6buhmfj3jhbnz2kyis.gif "Auto Rename")

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

## [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.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](https://dev-to-uploads.s3.amazonaws.com/i/b9l2am4ky5nwy3t5t14a.gif "Toggle Bold")

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

## [open in browser](https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser)

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

![open in browser](https://dev-to-uploads.s3.amazonaws.com/i/n5c6dgf4aemgzxmh3n68.jpg "Right Click Menu")

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

## [Output Colorizer](https://marketplace.visualstudio.com/items?itemName=IBM.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](https://dev-to-uploads.s3.amazonaws.com/i/7tej1abi3y0tueva38wy.jpg "VS Code Git Output")

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

## [Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.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](https://dev-to-uploads.s3.amazonaws.com/i/69qjkdrq9tjw8eznfh25.png "Polacode Capture")

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

## [Presentation mode](https://marketplace.visualstudio.com/items?itemName=jspolancor.presentationmode)

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](https://dev-to-uploads.s3.amazonaws.com/i/wis0s63iu20nzevvyw31.gif "Presentation Mode Usage")

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

## [Rainbow CSV](https://marketplace.visualstudio.com/items?itemName=mechatroner.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](https://dev-to-uploads.s3.amazonaws.com/i/tl9rtkbiazlamlufgc4a.png "Rainbow CSV Preview")

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

## [vscode-spotify](https://marketplace.visualstudio.com/items?itemName=shyykoserhiy.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](https://dev-to-uploads.s3.amazonaws.com/i/qxqltcheb21nbu9zjkcz.png "Current Spotify Track in VS Code")

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