12 VS Code extensions that make your dev life more easier and fun
Tags: vscode
Published: 2020-10-18 14:12:44

---
title: 12 VS Code extensions that make your dev life more easier and fun
published: true
description: 12 VS Code extensions that make your dev life more easier and fun.
tags: vscode
cover_image: https://hypertext-candy.s3-ap-northeast-1.amazonaws.com/posts/visual-studio-code-extensions/eye-catch.jpg
---

In this article, I introduce you to my favorite VS Code extensions.

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

With this extension, when you modify open-tag's name, corresponding close-tag's name is also automatically modified.

![Auto Rename Tag](https://hypertext-candy.s3-ap-northeast-1.amazonaws.com/posts/visual-studio-code-extensions/auto-rename-tag.gif)

It's one of the features that are default for IntelliJ or WebStorm and I wanted in VSCode too.

## [Better Comment](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)

This enables you to color your comments depending on words.

![Better Comment](https://hypertext-candy.s3-ap-northeast-1.amazonaws.com/posts/visual-studio-code-extensions/better-comment.png)

You are also able to set your own color and word mapping.

```json
"better-comments.tags": [
  {
    "tag": "CUSTOMIZE",
    "color": "#8bffff",
    "strikethrough": false,
    "backgroundColor": "transparent"
  }
]
```

I like this because it makes easier to looking for TODOs or so.

## [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)

This colors brackets such as `{}`, `[]`, `()`. Corresponding brackets are painted with same color so it becomes easy to follow the code.

![Bracket Pair Colorizer](https://hypertext-candy.s3-ap-northeast-1.amazonaws.com/posts/visual-studio-code-extensions/bracket-pair-colorizer.png)

## [change-case](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case)

This transform words from current format to another.

![change-case](https://hypertext-candy.s3-ap-northeast-1.amazonaws.com/posts/visual-studio-code-extensions/change-case.gif)

Below is an exmaple of supported formats.

| format | result |
|:---|:---|
| title | `Visual Studio Code` |
| kebab | `visual-studio-code` |
| camel | `visualStudioCode` |
| pascal | `VisualStudioCode` |
| constant | `VISUAL_STUDIO_CODE` |
| dot | `visual.studio.code` |
| path | `visual/studio/code` |

Choose and focus words and type `Change Case` in command palette to select target format.

## [GitLens](https://gitlens.amod.io/)

This brings string Git integration to VS Code. I'll show a couple of exmaples among its many features.

As you can (barely) see below, it shows latest commit of selected row.

![GitLens](https://hypertext-candy.s3-ap-northeast-1.amazonaws.com/posts/visual-studio-code-extensions/gitlens-1.png)

You can see changes of each commit in FILE HISTORY menu.

![GitLens](https://hypertext-candy.s3-ap-northeast-1.amazonaws.com/posts/visual-studio-code-extensions/gitlens-2.png)

You can confirm diffs between branches or tags in COMPARE menu.

![GitLens](https://hypertext-candy.s3-ap-northeast-1.amazonaws.com/posts/visual-studio-code-extensions/gitlens-3.png)

## [Highlight Matching Tag](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag)

This works as its name - highlights matching tag.

![Highlight Matching Tag](https://hypertext-candy.s3-ap-northeast-1.amazonaws.com/posts/visual-studio-code-extensions/highlight-matching-tag.png)

Yellow underline in the picture above is its feature. Simple but useful for reading long HTML.

By the way, in my case, I have to add this snippets to `settings.json` to make this work properly.

```js
"editor.occurrencesHighlight": false,
```

## [htmltagwrap](https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap)

With this, you can easily wrap selected area with HTML tags.

![htmltagwrap](https://hypertext-candy.s3-ap-northeast-1.amazonaws.com/posts/visual-studio-code-extensions/htmltagwrap.gif)

Type `option + w` and selected area will be wrapped with `<p>`  tags. Wrapping element can be configured.

## [Indent-Rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

This colors indents.

![Indent-Rainbow](https://hypertext-candy.s3-ap-northeast-1.amazonaws.com/posts/visual-studio-code-extensions/indent-rainbow.png)

It enhances code visibillity. And if your indent is broken, it warns with red color.

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

This shows icons in EXPLORER, depending on file extension or directory name.

![Material Icon Theme](https://hypertext-candy.s3-ap-northeast-1.amazonaws.com/posts/visual-studio-code-extensions/material-icons.png)

There is so many supprted icons other than above picture.

## [Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock)

This changes color of editor's frame by project.

![Peacock](https://hypertext-candy.s3-ap-northeast-1.amazonaws.com/posts/visual-studio-code-extensions/peacock.gif)

Easy to distinguish many projects!

Type `Peacock: Change to a favorite color` in command palette and you can choose the color. Color setting will be stored in `settings.json` inside of `.vscode`.

## [Regex Previewer](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex)

This is for checking regex expressions.

![Regex Previewer](https://hypertext-candy.s3-ap-northeast-1.amazonaws.com/posts/visual-studio-code-extensions/regex-previewer.png)

Type `option + command + m` and a check window will be opened in right pane. When you type some words into the pane, only words that is matched to seleted regex will be highlited.

## [ToDo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)

This collects TODOs and FIXes in comments and show their lists.

![ToDo Tree](https://hypertext-candy.s3-ap-northeast-1.amazonaws.com/posts/visual-studio-code-extensions/todo-tree.png)

<br/>

That's all! Thanks for reading 🤗. Hope you enjoyed.