Must have extensions for VS Code (according to me)
Tags: vscode, editor, extensions, tools
Published: 2017-12-13 00:33:22

---
title: Must have extensions for VS Code (according to me)
published: true
description: These is a list of some of the extensions I always have to install whenever I have a fresh VS Code on another machine.
tags: #vscode #editor #extensions #tools
cover_image: https://i.ytimg.com/vi/LSbFBJ0ObPE/maxresdefault.jpg
---

Everyone has things they can't live without, whether it is your pet, a really loud neighbor, taxes, the dank memes, or even water! (This is my way of reminding you and myself to drink water more often, got it? ok, let's keep going).

But this time I wanna talk about an editor that has a special place in my heart:

![Visual Studio Code](https://cdn.dribbble.com/users/698/screenshots/3168520/vs-code-icon.png)
(VS Code, in case you didn't read the title)

This little bad boi comes with some pretty cool features out of the box:

- Intellisense
- Integrated version control
- Markdown support with previewer
- Built in terminal
- Peek definition
- Debugger
- And blah blah blah... let's get to the good part:

### Plugins! wait, no.

## Extensions! 👏

These are basically a way to add extra functionality to your existing editor to make it go **over 9,000** (WHAAAT?!).
{% youtube SiMHTK15Pik %}
Alright, alright, alright. Enough chit-chat. 

## List of extensions I can't live without

### [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)

Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

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

### [Auto import](https://marketplace.visualstudio.com/items?itemName=steoates.autoimport)

Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.

### [Beautify](https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify)

Automatically formats your JavaScript, HTML and CSS code. (Yeah, like magic!).

### [Clipboard History](https://marketplace.visualstudio.com/items?itemName=Anjali.clipboard-history)

Keeps a history of your copied and cut items and let's you re-paste them if needed.

### [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)

View git log along with the graph and details. You can view the history of a file or a specific line.

### [Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)

Let's you run a file or a selected part of your code to quickly check the output. I normally use it when working with JavaScript, but it supports quite a wide range of  other languages as well.

### [Docker](https://marketplace.visualstudio.com/items?itemName=PeterJausovec.vscode-docker)

Do I really need to explain this one? If you don't know what _Docker_ is by now, go ahead and google it. You can thank me later 😉.

(Jk. You can go [here](https://docs.docker.com/get-started/), [here](https://www.youtube.com/watch?v=YFl2mCHdv24) and [here](https://medium.freecodecamp.org/a-beginner-friendly-introduction-to-containers-vms-and-docker-79a9e3e119b) for more Docker goodness).

### [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

What? Don't you like cute little icons on your explorer? Ok, then. Skip this one if you want.

### [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)

I mean... the name says it all, doesn't it?

### [CSS classes intellisense](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)

Aids you by giving you hints of possible CSS class names that are already in your project so you don't have to constanlty switch tabs over and over.

### [NodeJS Modules Intellisense](https://marketplace.visualstudio.com/items?itemName=leizongmin.node-module-intellisense)

Autocompletes the names of the core NodeJS modules and the ones you specified in your `package.json` available for you. Quite useful when starting to learn about Node.

### [ExpressSnippet](https://marketplace.visualstudio.com/items?itemName=vladmrnv.expresssnippet)

If you are learning/using NodeJS, chances are that you are also going to be using ExpressJS, so this extesion provides a few code snippets so you can focus on your logic rather than the boilerplate around your `get()`, `post()`, `put()`, `delete()` methods.

### [Markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)

This extension is similar to `jshint`. It warns you of possible mistakes in your Markdown code that is commonly used in open source projects across GitHub and other version control hosting platforms in a way, whether it's a RAEDME.md or CONTRIBUTING.md, they all use Markdown.

### [Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode)

Allows you to copy and paste blocks of code that you want and transform them into a screenshot with a good looking standard template. (Similar to how window-based screenshots look in MacOS).

![Aaaaand it's over](https://memegenerator.net/img/instances/500x/80947782/aaaaand-its-over.jpg)

That's it. These are my favorites extensions so far.

Do you have some extensions that could replace the ones I mentioned? Or would you add some more to the list?

Go ahead and let me know below, I'm always up for _extension hunting_.