VSCode のちょっとした拡張機能

## はじめに
この記事は気楽に読んでいただけたら嬉しいです。

どんな人が見る記事なの？

- VSCodeを日々使っている方
- これからVSCodeを使用して作業に取り掛かりたい方

上記の方には楽しんで見てもらえると思います。
また使用したことがない方にはVSCodeを使用してみたいと少しでも思っていただけたらと思います。

前半は面白い拡張機能、
後半は実際に普段使いで使用できる実践的な拡張機能を紹介していきます。
（今回は拡張機能の細かい詳細や設定などは省きます）

そして紹介した拡張機能に興味を持っていただけたらインストールして使用してみてください。

それではいきましょう！

## ちょっとした拡張機能
### Power Mode
![スクリーンショット 2022-04-13 15.42.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607495/a24311ab-3d18-367e-e48a-d7f435fb730e.png)
[Power Mode](https://github.com/codeinthedark/awesome-power-mode)

こちらは知ってる人も多いと思います。
Power Modeはタイピングをする度に設定したエフェクトがかかる拡張機能です。
そして右上にコンボが加算されます。
![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607495/8bf2f35d-5c68-a162-97ca-026cce92e6ba.gif)

主なエフェクト
- paraticles (爆発)
- fireworks (花火)
- flames (炎)
- magic (魔法？)
- clippy (クリップ？)
- simple-rift　（控えめ）
- exploding-rift (大爆発)

常にPower Modeを設定していると鬱陶しいのでテンションを上げたいとき等に設定してください。
(自分は未設定です。)
設定の仕方はPower Modeの設定にチェックをするだけです。

---
### vscode-pets

![スクリーンショット 2022-04-13 16.22.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607495/308f261b-3de9-02a8-be7b-293f6a748ca1.png)
[vscode-pets](https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets)

vscode-petsはVSCode内でペットを飼うことができる拡張機能です。
「何言ってるの」という方も多いと思いますので下の動画を見てください。

![ezgif.com-gif-maker (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607495/dcff0fda-56e7-9fe8-65d4-788e22c09ffa.gif)

カーソルクリックに合わせて猫が反応してくれます。
他にもたくさんのペットがいますのでご自身の好きなペットを配置してあげてください。
(トトロなども)

---
### vscode-live2d
![スクリーンショット 2022-04-13 16.52.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607495/2b9d4e58-fa2f-6e6a-c349-57acb170dd90.png)
[vscode-live2d](https://github.com/iCharlesZ/vscode-live2d-models#51-hk416-1-normal)

こちらはVSCode内にキャラクターを召喚する拡張機能です。

※インストールするとVSCodeのサポート対象外になります。
※インストールの際は自己責任でお願いします。

カーソルに合わせて顔や、目線を動かしてくれます。
実際に自身のPCでインストールした動作が下記になります。
![ezgif.com-gif-maker (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607495/c9eb2c60-885a-20d2-0171-6e3269cfe843.gif)

動作確認で登場する女の子はデフォルトで設定されています。
他にもたくさんのキャラクターに設定することができるので試してみてください。


---
## 実際に普段から使用できる拡張機能
現在VSCodeの拡張機能を紹介している記事はたくさんあり、自分もその記事を読みインストールした拡張機能がたくさんあります。
その中で特に自分が良いと思った拡張機能をざっくりと紹介します。

### Git History
![スクリーンショット 2022-04-13 17.43.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607495/ee45c431-cf68-4799-1cf4-98d18921b6af.png)
[Git History](https://code.visualstudio.com/docs/getstarted/keybindings)

開発で欠かせない`Gitでのバージョン管理`をVSCode内で、コミット履歴等を確認することができる拡張機能になります。
実際活用するケースは非常に多いです。

---

### Trailing Spaces
![スクリーンショット 2022-04-13 20.13.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607495/f88e40d0-e442-26ce-c52d-f13c2ed63a70.png)
[Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)

Trailing Spacesは行の末尾にスペースが入っていると赤く表示してくれます。
余計な空白を示してくれるのですぐに気づくことができます。

---
### indent-rainbow
![スクリーンショット 2022-04-13 20.16.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607495/d30e1a42-2e80-cbb7-9c20-e70fb88025ab.png)
[indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

indent-rainbowは行前の空白がどれだけ空いているか色別で表示してくれます。
この色がバラバラで自分的には見やすいのですが、統一したい！という方は色を統一することもできるので設定してみてください。

---
### Bracket Pair Colorizer
![スクリーンショット 2022-04-13 20.19.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607495/aa79f075-3d42-e30c-bec6-37d909abfa90.png)
[Bracket Pair Colorizer](https://github.com/CoenraadS/BracketPair/blob/HEAD/CHANGELOG.md)

Bracket Pair Colorizerは括弧がどれだけ続いているのか色と線で表示してくれます。
そのため括弧がどこまで続いているのか一目見ただけでわかるのでとても助かっています。

---
## まとめ
いかがでしたでしょうか。
面白い拡張機能は開発効率が上がるとは言えませんが息抜きに入れてみるのも良いと思います。
実際に自分も入れてみて息抜きしたこともあります...

実際に普段から使用できる拡張機能は本当に便利で重宝しています。
他にもまだまだたくさんの便利な拡張機能があります。（今回紹介していない拡張機能も）
自分もまだ知らなく開発効率を上げたり息抜きできる拡張機能に今後出会うかもしれません。
そんな拡張機能に出会えた日にはまた記事を書くかも...書いていいのか。
もしくは「こんな拡張機能があったら良いのにな」と思っている方はご自身で作ってみるのも良いかもしれませんね。

また、VSCodeを使用していない方、使用経験が浅い方が少しでもVSCodeを使用したいと思っていただけたら幸いです。

そして是非弊社で一緒に働いていただける方を募集しております。
下記URLを見ていただいて少しでも興味を持っていただけたら応募してください。
[株式会社運動通信社](https://sportsbull.jp/about/company/)