2021年に絶対に入れたいVSCodeの拡張機能

#🤗「ねぇねぇ、ぴえんちゃん。」
🥺「わおくんどうしたの？」


🤗「開発環境にVSCode使ってるんだけど、拡張機能ってたくさんあるけど」
🤗「どれかおすすめとかってない？？？？？」


🥺「わかった！」
🥺「じゃあ私が『これがおすすめ！』の拡張機能教えてあげる！」


🤗「ありがとぉぉぉぉぉぉ！！！」
🥺「いぃぃぃえぇぇぇぇぇぇ！！！」


#Bracket Pair Colorizer 2
<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563930/ab2984fb-2f4e-ba5e-0d41-42ad4d6824dd.png" />

🥺「これを使うと、一致するブラケットを色で識別してくれるの」
🥺「たくさんブラケットがあっても一目でわかるから便利！」

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


#Remote Containers

<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563930/2571fe5b-7abc-15ca-30d6-1165301c1f08.png" />

🥺「Remote Containersは、Dockerコンテナをフルに開発環境として使えるの！」
🥺「新しいチームメンバーが入った時にも簡単に立ち上げて実行できるようになるから！」


🤗「めっちゃいいじゃぁぁぁぁぁぁぁん！！！！」

> [Remote Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)


#Import Cost

<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563930/862ac8b7-a90e-2941-f1e0-fa9995f613fe.png" />

🥺「Import Costは、JavaScriptとかでインポートしたときのパッケージの推定サイズ数を教えてくれるの！」
🥺「重すぎる時は赤色で警告を出してくれるから必須！」

> [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)

# Live Share
<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563930/44110069-32ad-f7c7-05f0-df83c74d4c30.png" />



🥺「Live Shareは、プロジェクトの仲間と共同編集とか共同デバッグができるの！」
🥺「音声通話だったりチャットとかもできるから、ペアプロとかもできるね」

> [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)

# Quokka.js

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563930/e9962095-051c-38f2-5f56-e38de275f1a2.gif" />


🥺「Quokka.jsは、JavaScript/TypeScriptの開発者の生産性を格段にあげてくれる！」
🥺「ランタイム値が更新されて横に表示してくるの」

> [Quokka.js]
(https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)

# Better Comments

<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563930/cacae609-192d-a4bf-5139-5484a8b9c1f3.png" />


🥺「Better Commentsは、わかりやすいコメントを書くときには必須！！！」
🥺「こんな感じで使いわけがあって他の人がみても分かりやすいよね！」


`* ハイライトしたテキストの時`
`! エラーと警告の時`
`? 質問の時`
`// 取り消し線`
`TODO やること`


> [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)


# Settings Sync

<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563930/f80226a5-f4ea-a75c-52e9-bfa00fffa9f7.png" />


🥺「Settings SyncはGitHub Gistを使って、設定とかワークスペースとかをコンピュータ間で同期できるの」
🥺「チームで設定を共有したい！って時にもいい！」

> [Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)

# Remote — SSH

<img width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563930/7f967790-2fc1-3862-ebfa-3864d808e6dc.gif" />


🥺「これは、リモートマシンで開発とかリモートマシンのファイルをVSCodeで編集ができたりするの」
🥺「例えば、ec2の環境で本番環境とOSを同じにして開発できたり、」
🥺「複数のマシンから同じ開発環境にアクセスできたりね！」
🥺「もちろんec2じゃなくてもssh接続できれば、他でも大丈夫！」

> [Remote — SSH](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh)


# Prettier
<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563930/aa76b5e5-b77f-d319-90e4-98e80aa1638c.png" />

🥺「Prettierは、コードを解析してコードをフォーマットしてくれるの！」
🥺「だからコードの一貫性が保たれるからコードがとっても綺麗になるよ！」

> [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)


<br />



🤗「ぜぇぇぇぇぇぇぇんぶ、めっっちゃいい！！！！！！！」
🤗「これ全部使ってみる！！！！」


🥺「使ったら感想教えてね！！！」


🤗「はーーーーーーーーい！！」