Part-2:  Make your dev environment awesome with OhMyZSH + VSCode 🔥⚡️🔥 plugins, fonts, Icons and others
Tags: vscode, javascript, productivity, react
Published: 2019-10-25 21:18:18

VSCode is awesome and we know it. Performance is the key here. But overall easy-to-use design, plugins and marketplace make this even more powerful.

But before putting some cool VSCode plugins, today I am gonna write about OhMyZSH first. On my last Post, I wanted to write about it but I was so sleepy and could not finish :sleeping: . I wrote at the end that I would continue ZSH in my next post. So here I am :heart_eyes:

Now let's talk about my Terminal, yes OhMyZSH. :zap:

I use [<b>OhMyZSH</b>](https://ohmyz.sh/) on top of iTerm2. Here is the Link for [<b>iTerm2</b>](https://www.iterm2.com/).
After installing iTerm2, please run this command on iTerm2 Terminal-
```
sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
```
I always liked the Homebrew color scheme from MacOS's default Terminal. That's why I tried to use Homebrew for iTerm2 too.
I found the [<b>Homebrew color scheme here</b>](https://iterm2colorschemes.com/) :nerd_face:

It already looks so cool to me :cool: :tada: :heart:
I don't like my Terminal to be messy, so this settings suit me perfectly :star:

Also, there are a lot of awesome themes for ZSH :point_right: [<b>here</b>](https://github.com/robbyrussell/oh-my-zsh/wiki/Themes) :fire:

You can choose your preferred one :boom:

Nice thing is - when you have your ZSH installed, you will have the same theme and settings inside your VSCode terminal. My VSCode terminal looks like this now :point_down:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/pkh1nazqr3v1c49mfmk9.png)
<hr />

I will share some of the best Plugins you can use today to improve your developer experience :boom:

1.[<b>Auto Close Tag</b>](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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/z1vtq0a5758vtgd9o6mq.gif)

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

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

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/izzvagf8d0qy973pajow.gif)

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

This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/dwnc69amc2whog42dtyg.png)

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

It highlights matching opening or closing tags. Optionally it also shows path to tag in the status bar.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/eoba392dnjvxh12oi7l1.gif)

There are few more cool plugins I use. I will continue writing this on next Part.:zap:

Till then,
Cheers!
:wave:

As I am trying to contribute contents on the Web, you can buy me a coffee for my hours spent on all of these ❤️😊🌸
<a href="https://www.buymeacoffee.com/destromas" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>

My Blog: https://shahjada.me