はじめに

入れるだけで使用感も見た目も雰囲気もなんでも変えられちゃう拡張機能...！
そんな拡張機能のなかで、個人的にまじでおすすめする拡張をいくつかピックアップしたので
ぜひぜひ参考までにみていってください...！！

見た目に関する拡張

ここでは背景などの全体の色を変えるテーマ拡張と、
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という項目を探して、（なければ追加）

配列にある色を変えるだけで繰り返される色が変更できます！
僕のモノクロカラーをサンプルとして書いておきます。

settings.json

{
    "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つでもいいものが見つかれば嬉しいです、、、！