【必見！】Visual Studio Codeの面白い拡張機能から便利な拡張機能について

この記事はhttps://qiita.com/advent-calendar/2023/iit_it の17日目の記事です。
是非とも他の方の記事もご覧になってください！

https://www.iwate-it.ac.jp/

# はじめに
皆さんがよく使っているVisualStadioCodeでプログラムを書いているとき、私は思いました。なんか画面が寂しいなー...と。
そこで、私が入れていた拡張機能を紹介したいと思います!
とその前に一応拡張機能の入れ方を書いときます！
1,VisualStadioCodeを開く
2,左側の1個ブロックが欠けているボタンをクリックする
3,入れたい拡張機能の名前を入力する
4,検索した拡張機能を「インストール」で完了！

***
# 1.vscode-pet
これはかわいい！ペットたちが端っこで踊っているではありませんか！
さらに、猫ちゃんたちだけでなく、トトロなど有名にキャラクターもいたりします！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635160/94561a78-8084-ba80-5907-c5093f2f1243.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635160/7977f8ce-87e5-f629-ca72-c018f241ba21.png)
かわいいですね！サイズも変更できます！
- サイズ変更の仕方
1,左側の1個かけているボタンをクリック
2,拡張機能の一覧の右下に歯車のようなものがあり、歯車をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635160/82442692-fea4-643d-c213-b62200d77578.png)
3,「拡張機能の設定」と出るので、これをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635160/792369dc-522a-3c61-39b7-89519a1fab53.png)
4,押すとこんな感じで表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635160/32362e8b-ceec-0877-6094-a66988a8c096.png)
5,サイズや色なども変更できます！
いろいろ試してみてね！

# 2.vscode-vector-aquarium
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635160/402039b6-e8f0-3aa0-d180-2a7f6066dc5c.png)
こちらは魚がたくさん動きます！餌もあげれちゃいます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635160/3dd739ce-b9ed-3795-32c4-233e1da965a4.png)
-　表示の仕方
1,拡張機能を押したところの下にインストールしたものと、同じアイコンがあります。
2,それを押して完了！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635160/554a6920-f66b-8ab5-c2c3-23e01917fbd1.png)
（ただ、他のメニューバーが押せなくなったりしたので、右上の「セカンダリ　サイド　バーを切り替える」を押してメニューバーのアイコンを右側にドラッグして表示するのがおすすめです）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635160/226cb121-495b-3039-5643-1fcfed998b79.png)
みてて癒されますね。詳しくいじってみたい方は開発者さんのURLも貼っておきます！
https://qiita.com/le-nn/items/244c638b5ecebc54868b

# 3,Incredibly In Your Face
エラーの数によって、おじさんの顔が変化します！私は怖いので入れてません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635160/8b111e67-c3af-6faf-d598-ff224fed969e.png)
と言いつつ、入れました。こんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635160/a80d25bd-6ae5-5ec8-2098-6c126cedab5a.png)

# 4,Hacker Sounds
個人的にこれ好きです。タイピングする度に音が鳴るので気持ちいいです！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635160/7a4ff5df-24fa-6814-4697-2f18c0edb092.png)

# ここからは便利な拡張機能を紹介！

# 5,vscode-icons
なんとアイコンが！分かりやすくなります！
個人的にこれ一番便利まであるかもしれないです！
ぜひ入れてみてください！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635160/5fe62d64-c172-f9d7-c9db-f7e82e92b150.png)

# 6,indent-rainbow
インデントが色分けされます！分かりやすくて好き！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635160/4f8d279d-c90b-ddab-d784-aa64a132fa79.png)

# 7,Code Spell Checker
プログラムのスペルミスを波線で指摘してくれるものです！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3635160/ffdd8b3a-46f9-b7ee-29d3-73d078b46652.png)


# 最後に
まだまだVisual Stadio Codeを使い始めて全然月日がたっていないので、もっともっと使用して拡張機能を知りたいです。ちなみに私はソースの色を変更するのにハマっています。かっこいい色変更の拡張機能があったら教えてください！