最上級にかわいいエディタを作るためのVSCodeの拡張機能10選

こんにちは！フロントエンドエンジニアの藤川です。

VSCodeでコーディングする時に、変わり映えしないエディタ画面にふと飽きてしまうことはありませんか？

デフォルト設定でも十分シンプルでかっこいい感じがしますが、何時間もコーディングしているうちに「味変」したくなることもあるはず。

そこで、エディタをかわいくしてみることをおすすめします。エディタがかわいくなれば、きっと生産性も上がるのではないでしょうか？

今回はVSCodeがかわいくなる拡張機能をご紹介します！

かわいいは実用性を兼ねる！おすすめ拡張機能5選

Prettier - Code formatter

かわいいエディタを作る上で、コードの見た目を整えることは不可欠です。

Prettierはコードの見た目をよしなに整えてくれるフォーマッターです。

ファイルをCtrl+Sで保存すると、ぐちゃぐちゃになってしまったコードを一瞬で整形してくれます。

ESLintと組み合わせて使われることも多く、聞いたことのある方も多いのではないでしょうか。

https://prettier.io/

Git Graph

Git Graphはgitのコミット履歴をツリー上に表示してくれるツールです。

作業しているうちにコミットやブランチの状態がわからなくなってしまいがちですが、Git Graphを使うことでそれらを視覚的に把握できるためとても愛用しています。

ブランチごとに色が変わってくれるのが個人的にかわいいと思うポイントです。

https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

indent-rainbow

インデントを色分けしてくれる拡張機能です。

色分けされることで見た目がかわいくなるのはもちろんのこと、コードの階層構造がとてもわかりやすくなるのでおすすめです。

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

vscode-icon

VSCodeのエクスプローラーで表示されるアイコンをいい感じにしてくれる拡張機能です。

例えば、VSCodeの場合デフォルト設定だとディレクトリに対してアイコンは表示されませんが、vscode-iconを入れることでフォルダのようなかわいらしいアイコンが表示されるようになります。

また、各種ファイルのアイコンもその言語のロゴが表示されるようになります。

https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

Polacode

かわいくておしゃれなコードブロックの画像をVSCode上で生成できる拡張機能です。

SNSやテックブログなどでよく見るような「映える」コードブロックを作ることができます。

https://marketplace.visualstudio.com/items?itemName=pnp.polacode

息抜きにおすすめ！なんだかかわいくて面白い拡張機能5選

vscode-pets

初めにご紹介するのは「vscode-pets」です。

エディタ上にワンちゃんやネコちゃん、キツネといったいろいろな動物を表示させることができます。

ペットにカーソルを合わせると「👋」などのリアクションを返してくれます。

一人で作業している時にかわいいペットの姿を見られるとなんだか安心しますよね。

https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets

Pastel

VSCodeのカラーテーマをパステルカラー基調のものにしてくれる拡張機能です。

カラーテーマ「Pastel」を適用すると、各プロパティの文字色がピンクやパープルなどといったパステルカラーになります。

「ゆめかわ」な雰囲気のエディタにしたい方にはおすすめのテーマです。

https://marketplace.visualstudio.com/items?itemName=cval.pastel-theme

QuackTrack

QuackTrackとは読んで字の如く、エディタ内のカーソルにアヒルちゃんがついてきてくれる拡張機能です。

カーソルの状態に応じてアヒルちゃんが歩いたり、寝たり、くしゃみをしたりします。

アヒルちゃんのためにコーディングを頑張ろうという気持ちになれるのでおすすめです。

https://marketplace.visualstudio.com/items?itemName=2Guys1Account.quackrack-cursor

vscode-vector-aquarium

Vector Aquariumは、VSCode上に水族館を表示できる変わった拡張機能です。

タブを開くとクラゲや魚が不規則に泳いでいる姿を見ることができます。

作業に疲れて一休みする時に見ると目の保養になります。

https://marketplace.visualstudio.com/items?itemName=le-nn.vscode-vector-aquarium

Bongo Cat Buddy

Bongo Cat Buddyは猫ちゃん（Bongo Cat）と一緒にタイピングができる拡張機能です。

具体的には、エディタに文字を打ち込むとBongo Catも一緒に手を動かしてくれるというものです。

手書き感のあるイラストがとてもかわいいですね。

https://marketplace.visualstudio.com/items?itemName=JohnHarrison.bongocat-buddy

最上級にかわいい拡張機能で生産性を向上しよう

いかがでしたでしょうか。今回は「かわいい」という観点から、実用性の高いもの、面白いものまで様々な拡張機能を紹介しました。

今まで使ってきたエディタに飽きてしまったエンジニアの皆さんは、ぜひ今回紹介した拡張機能を取り入れてみてはいかがでしょうか。

かわいい拡張機能を活用して、楽しく生産的なコーディングライフをお送りください！