#🤗「ねぇねぇ、ぴえんちゃん。」
🥺「わおくんどうしたの?」
🤗「開発環境にVSCode使ってるんだけど、拡張機能ってたくさんあるけど」
🤗「どれかおすすめとかってない?????」
🥺「わかった!」
🥺「じゃあ私が『これがおすすめ!』の拡張機能教えてあげる!」
🤗「ありがとぉぉぉぉぉぉ!!!」
🥺「いぃぃぃえぇぇぇぇぇぇ!!!」
🥺「これを使うと、一致するブラケットを色で識別してくれるの」
🥺「たくさんブラケットがあっても一目でわかるから便利!」
#Remote Containers
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F563930%2F2571fe5b-7abc-15ca-30d6-1165301c1f08.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4c805c749391737e1263bfd4159913ad)
🥺「Remote Containersは、Dockerコンテナをフルに開発環境として使えるの!」
🥺「新しいチームメンバーが入った時にも簡単に立ち上げて実行できるようになるから!」
🤗「めっちゃいいじゃぁぁぁぁぁぁぁん!!!!」
#Import Cost
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F563930%2F862ac8b7-a90e-2941-f1e0-fa9995f613fe.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f58ae8f4fda3b2ea90edd5d79edc570c)
🥺「Import Costは、JavaScriptとかでインポートしたときのパッケージの推定サイズ数を教えてくれるの!」
🥺「重すぎる時は赤色で警告を出してくれるから必須!」
Live Share
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F563930%2F44110069-32ad-f7c7-05f0-df83c74d4c30.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=de2d7835d4d930051fa1a7835cd72fa7)
🥺「Live Shareは、プロジェクトの仲間と共同編集とか共同デバッグができるの!」
🥺「音声通話だったりチャットとかもできるから、ペアプロとかもできるね」
Quokka.js
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F563930%2Fe9962095-051c-38f2-5f56-e38de275f1a2.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a8d4bd0c83675a8180c01eaac762c15d)
🥺「Quokka.jsは、JavaScript/TypeScriptの開発者の生産性を格段にあげてくれる!」
🥺「ランタイム値が更新されて横に表示してくるの」
[Quokka.js]
(https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)
Better Comments
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F563930%2Fcacae609-192d-a4bf-5139-5484a8b9c1f3.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=d42e588d99d7727aafe1bfab48c11469)
🥺「Better Commentsは、わかりやすいコメントを書くときには必須!!!」
🥺「こんな感じで使いわけがあって他の人がみても分かりやすいよね!」
* ハイライトしたテキストの時
! エラーと警告の時
? 質問の時
// 取り消し線
TODO やること
Settings Sync
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F563930%2Ff80226a5-f4ea-a75c-52e9-bfa00fffa9f7.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=9f528c59da50460a83276ec4627258ba)
🥺「Settings SyncはGitHub Gistを使って、設定とかワークスペースとかをコンピュータ間で同期できるの」
🥺「チームで設定を共有したい!って時にもいい!」
Remote — SSH
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F563930%2F7f967790-2fc1-3862-ebfa-3864d808e6dc.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=633666f1a4a47004c1bf52e4de12080d)
🥺「これは、リモートマシンで開発とかリモートマシンのファイルをVSCodeで編集ができたりするの」
🥺「例えば、ec2の環境で本番環境とOSを同じにして開発できたり、」
🥺「複数のマシンから同じ開発環境にアクセスできたりね!」
🥺「もちろんec2じゃなくてもssh接続できれば、他でも大丈夫!」
Prettier
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F563930%2Faa76b5e5-b77f-d319-90e4-98e80aa1638c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a9334906e0173aa4065240ec08aeec01)
🥺「Prettierは、コードを解析してコードをフォーマットしてくれるの!」
🥺「だからコードの一貫性が保たれるからコードがとっても綺麗になるよ!」
🤗「ぜぇぇぇぇぇぇぇんぶ、めっっちゃいい!!!!!!!」
🤗「これ全部使ってみる!!!!」
🥺「使ったら感想教えてね!!!」
🤗「はーーーーーーーーい!!」