DEV Community šŸ‘©ā€šŸ’»šŸ‘Øā€šŸ’»

Cover image for 12 VS Code extensions that make your dev life more easier and fun
Masahiro Harada
Masahiro Harada

Posted on

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

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.

Auto Rename Tag

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.

Better Comment

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

"better-comments.tags": [
  {
    "tag": "CUSTOMIZE",
    "color": "#8bffff",
    "strikethrough": false,
    "backgroundColor": "transparent"
  }
]
Enter fullscreen mode Exit fullscreen mode

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.

Bracket Pair Colorizer

change-case

This transform words from current format to another.

change-case

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.

GitLens

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

GitLens

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

GitLens

Highlight Matching Tag

This works as its name - highlights matching tag.

Highlight 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,
Enter fullscreen mode Exit fullscreen mode

htmltagwrap

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

htmltagwrap

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

Indent-Rainbow

This colors indents.

Indent-Rainbow

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.

Material Icon Theme

There is so many supprted icons other than above picture.

Peacock

This changes color of editor's frame by project.

Peacock

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.

Regex Previewer

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

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

ToDo Tree

That's all! Thanks for reading šŸ¤—. Hope you enjoyed.

Top comments (9)

Collapse
 
brojenuel profile image
Jenuel Oras Ganawed

dp you guys know a good theme for vs code?

Collapse
 
mattmcegg profile image
Thregg Poppa

Material UI theme is awesome. I use the high contrast version

Collapse
 
brojenuel profile image
Jenuel Oras Ganawed

Oh thanks thanks,, šŸ˜Š ill try

Collapse
 
_masahiro_h_ profile image
Masahiro Harada

I love night owl.

Collapse
 
brojenuel profile image
Jenuel Oras Ganawed

Wow yeah, it looks cool

Collapse
 
jwokiri profile image
Joe Oketch

I sure enjoyed

Collapse
 
ifndefdeadmau5 profile image
Yeee

I got indent rainbow, cool

Collapse
 
princesingh123 profile image
Prince Singh

Nice extension..

Collapse
 
danniannie profile image
danni.

These all look so useful... going to download some now šŸ˜†

Rust language vs others

Stop by this week's meme thread!