Masahiro Harada

Posted on Oct 18, 2020

12 VS Code extensions that make your dev life more easier and fun

#vscode

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

Auto Rename Tag

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

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

Better Comment

This enables you to color your comments depending on words.

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

"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

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

change-case

This transform words from current format to another.

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

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.

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

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

Highlight Matching Tag

This works as its name - highlights matching tag.

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.

"editor.occurrencesHighlight": false,

htmltagwrap

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

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

Indent-Rainbow

This colors indents.

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

Material Icon Theme

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

There is so many supprted icons other than above picture.

Peacock

This changes color of editor's frame by project.

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

This is for checking regex expressions.

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.