はじめに
入れるだけで使用感も見た目も雰囲気もなんでも変えられちゃう拡張機能...！
そんな拡張機能のなかで、個人的にまじでおすすめする拡張をいくつかピックアップしたので
ぜひぜひ参考までにみていってください...！！
見た目に関する拡張
ここでは背景などの全体の色を変えるテーマ拡張と、
UI（アイコンなど）変更系の拡張に分けて紹介します！
UI変更系の拡張
Japanese Language Pack for Visual Studio Code
一番有名ですが、VSCodeを日本語に設定するやつです。だいじです。
Color Highlight
16進数、rgb、rgba、hslなどあらゆる色のコードをその場でハイライトとして見せてくれる拡張です。
もともと標準？でお気持ちサンプルがあるのですが、圧倒的にわかりやすくて最高です。
| before | after |
|---|---|
 |
 |
indent-rainbow
こちらも有名ですが、インデントが見やすくなります。
まっじでこれがないと生きていけないです。
| before | after |
|---|---|
 |
 |
これ、実はsettings.jsonで虹色から色が変更できちゃうんです。
indentRainbow.colorsという項目を探して、（なければ追加）
配列にある色を変えるだけで繰り返される色が変更できます！
僕のモノクロカラーをサンプルとして書いておきます。
{
"indentRainbow.colors": [
"rgba(197, 188, 255, 0.1)",
"rgba(109, 101, 160, 0.1)"
]
}
Material Icon Theme
ファイルのアイコンが劇的に変わります。
それだけじゃなく、ディレクトリも意味があるものは基本的にアイコンがかわります。
見やすすぎるので全開発者入れた方がいいです。
| before | after |
|---|---|
 |
 |
 |
 |
同じにみえないくらい見やすくなります！！！！
テーマ拡張
エディター全体の色を変えるテーマ拡張をいくつか紹介します！
特に上2つまじでおすすめです！！
| 拡張名 | 拡張サンプル | 説明 |
|---|---|---|
| Noctis |  |
今僕が使ってるやつですが割とめちゃめちゃおすすめです。青も赤も紫もあるので色々選べますし、ライト系テーマもあるみたいです！ |
| Monokai Pro |  |
これも結構おすすめで、目に優しく落ち着いた色をしてる配色が多いのでゆったりした気分で開発できます。🍵 |
| Red One Dark Pro |  |
背景が黒に近く、文字色が蛍光色なのですごくくっきりとコードを見られます。正直目が疲れる配色ですが部屋が暗いと相性がばつぐんになります。 |
| Viow Color Themes |  |
少し独特な文字色が特徴のテーマで、他のテーマでは見られない色がハイライトに使われています。 |
| Cobalt2 Theme Official |  |
全体的に色があかるく、おもちゃ感があるテーマです。レゴみたいな感じ... |
| Nord |  |
このテーマはこのサンプルの色しかないのですが、今日青い気分って日におすすめです。 |
実用的すぎる拡張
ここまで見た目の話をいろいろしましたが、実用的すぎる拡張もいくつか紹介します。
少し分野は限られますが、それでも超便利です。
Auto Rename Tag
 |
htmlやjsx, tsxで開きタグのタグ名を変更すると自動的に閉じタグも同期して変更してくれる神拡張です。 |
Live Server
 |
htmlファイルをリアルタイムでホストしてくれるもので、 ブラウザから見ることができる上にホットリロードされるのでフロントエンドの開発がスムーズです。 |
Live Preview
 |
htmlファイルをリアルタイムでホストし、VSCode内のタブでサイトを表示することができます。 |
htmlをホストしてホットリロードできるようにしてくれるのも強いですし、
Live Previewに関してはVSCode内で完結するのが神すぎます。
Code Runner
 |
開いているファイルを手軽にボタンワンクリックで実行できちゃう優れものです。どんなファイルでも実行できます。 |
SSH FS
 |
ssh接続で遠隔のサーバーのフォルダをVSCodeで見られるものです。 特に個人開発などではちょっとした変更などをわざわざコマンドラインから nanoやvimで難しく記述する必要がないので重宝します。 |
Prettier - Code formatter
 |
フロントエンド専門のコード整形拡張です。 そのプロジェクトの .prettierrc.jsonを読み取ってショートカットから整形してくれます。また、 JSONファイルの整形にも対応しており、入れておいて損はない拡張です！ |
GitLens
 |
ターミナルに並ぶタブでコミット履歴やブランチ情報などを見る/探すことができます。わざわざgit logやgit branchする必要がないのでガチで便利です。 |
拡張じゃないけど便利機能
色々と便利拡張を紹介してきましたが、VSCodeくん標準でものすごく便利なんです。
それと、見た目に関するおすすめ設定もいくつかあるので紹介します。
mdのショートカット
.mdファイルを開いた状態でCtrl + Shift + Vするとそのmdのプレビューが表示されます。
これまじで有能すぎます。
| md | preview |
|---|---|
 |
 |
ディレクトリ構造の幅調整
ディレクトリ構造が複雑で、同じ名前のファイルがいくつもある場合、
どれがどの階層にいるのかわからなくなる上に見にくすぎますよね。
それ実は調整できたんです。
-
Ctrl + ,で設定を開く -
tree indentと検索 - 一番上に出てきた数字を大きくする（おそらく標準が8、僕のおすすめが
25です！）
| before | after |
|---|---|
 |
 |
まじで見違えます。めちゃくちゃわかりやすいです。
おまけ
ここまで色々と紹介してきたので、おまけ拡張機能を紹介します。
vscode-pets
 |
インストールすると画面左下にペットゾーンが出来上がって、すごい種類のペットをここでぴょんぴょんさせておくことができます。めっちゃかわいいです！あとボール投げて戯れられます！！ インストールしたその日以降一度も使ったことがありません！！ |
うさぎ5匹と、ととろと、にわとりを召喚してみました。
ぴょーんぴょーん。
そっと閉じておきます。
おわりに
有名な拡張機能 + 便利機能をいくつか紹介しました！
なにか1つでもいいものが見つかれば嬉しいです、、、！