本記事はFIXERが提供する「cloud.config Tech Blog」に掲載された「あたしのVSCodeがこんなに可愛いわけがない。」を再編集したものです。
こんにちは、福里(♀)です。
まずはこれを見てみてください。
図1：いま使ってるVSCode
あたしのVSCode全然かわいくな〜〜〜〜い！！！！😡
全然可愛くないじゃな〜〜〜い！！こんなんじゃ仕事もやる気にならないわよもう！！
こんなのあたしは認めないんだから！というわけで、いまからこの子をかわいく大変身させていくわよ❤
あ、今回は可読性なんていう野暮なものはお花畑に置いてきたわ。うふふ。
めっかわなTheme❤️（Dracula）
というわけでVSCode大変身計画がはじまったわね。
まずあたしが目につけたのは、ずばりTheme(配色テーマ) よ！これ無しじゃかわいいは語れないわ。
とりあえずこれを見てみなさい。
図2：Dracula Softを適用してみたわ
どう？？ これだけで雰囲気がかなり変わったんじゃないかしら。
今回あたしが使用させていただいたのはDraculaというテーマよ！
さっき見せたのはそのなかのDracula Soft というものを適用した画面ね。落ち着いた雰囲気のなかにもかわいさのヴェールをまとっていて、なんだか大人の余裕を感じさせるようなとても良いテーマだと思うわ🥰
これだけであなたの隣に座っている人はドギマギしちゃうこと間違いなしね！
Themeを変えるときは、「Ctrl（⌘Cmd）」+「Shift」+「P」を押して、基本設定の配色テーマから「Dracula Soft」を選べばOKよ。
図3：これがThemeの変え方よ
フォントにもかわいさを❤️（FiraCode）
さっき見せた画像で気付いた人もいるかもしれないけど、実はテーマだけじゃ無くてフォントも変えていたわ。
プログラミングの世界では割と有名な、とてもかわいいフォントよ。それがこれ！ FiraCodeよ！
図4：プログラミング界屈指のかわいい系フォント、FiraCodeよ
今回は簡素なソースコードで紹介しているから魅力が伝わりにくいかもしれないわね… でもこのフォントすごいの。
特に記号まわりのかわいさに関しては、ダントツでこのFiraCodeに軍配が上がるんじゃないかしら。Draculaのテーマにも合っていて、あたしの中でとてもお気に入りのフォントよ🥰
VSCodeで使用するフォントを変えるときは、基本設定>ユーザー設定の中にある「Font Family」の一番頭に使いたいフォント名を入れてあげるといいわ。今回は「Fira Code」と入力すればOKよ！
図5：これであなたもKawaii Familyの一員よ
かわいいはかわいいを呼ぶ（vscode-pets）
なんだかさっきからあたしのVSCodeになにかいる気がするのよね… なんなのよまったく… って
図6：VSCodeでネコちゃんが飼えちゃうvscode-pets
あらやだかんわいい〜〜〜〜！！！！🥰🥰🥰🥰
あたしのかわいさに惹かれてやってきちゃったのかしら！
なんてことは当然なくて、これはvscode-petsっていう拡張機能よ。なんとVSCode内でペットが飼えちゃうの！
「Ctrl（⌘Cmd）」+「Shift」+「P」を押して、下のコマンドを実行してあげるとネコちゃんが遊びに来てくれるわ❤️
図7：ネコちゃんを呼ぶ魔法の呪文よ🐈
あたしは根っからのネコちゃん推しだからネコちゃんを2匹飼っているけど、他にもイヌさんやアヒルさん・ヘビさん・カニさんなんかも飼えちゃうわ！
コマンドもいくつか用意されていて、ボールを投げるとうちのベラちゃん（※猫の名前です）がキャッチしてくれるのよ！🥰
かわいすぎて卒倒しちゃいそう……
今回紹介する中でもイチ押しの拡張機能よ。ネコちゃんにはボールだけじゃなくてかわいい男の子も捕まえて来てほしいわね😈
だがターミナル、テメーはダメだ(starship)
ここまでやってまだかわいくないやつがいるわね… そう、ターミナルよ。
VSCodeのターミナルの見た目をいじるのはとてもめんどくさい疲れちゃうから今回は諦めるけど、なんとかコマンドの表示だけでもかわいくできないかしら…
と色々試してみた結果あたしが行き着いたのがstarshipよ！
前々からこの子のかわいさは小耳にはさんでいたけど、いい機会だから試してみたわ。そしたら
図8：ぎゃんかわターミナル
おきゃわきゃわの田村麻呂〜〜〜🥰🥰（？？）
starshipを導入した一番の理由がこれよ。なんとモジュールのステータスごとに自分で決めた絵文字を表示できるの！！
今回追加した設定はこれね
## in ~/.config/starship.toml
[character]
success_symbol = "🥰"
error_symbol = "😭"
use_symbol_for_status = true
コマンドが失敗したら泣きついてくるなんてぎゃんかわ侍じゃない？？？ かわいすぎて愛着が湧いちゃうわね。
かわいいに番外編なんてない（fairyfloss）
でもやっぱりVSCodeのターミナルだとなんだか寂しいから、ついでにiTermもかわいくしてみたわ。
図9：あたしの自慢のiTerm
どうかしら、なかなかかわいく仕上がったんじゃないかって自負しているわ🥰
iTermのカラーパレットをぽちぽちして、あたしの好きな配色にしてみたの。
もしあたしと同じ配色にしたいっていうかわいい子猫ちゃんがいたら、下のカラーパレットを真似するといいわ（配色のエクスポートファイルは置けなかったわ… ごめんなさいね）。
図10：あたしの自慢の配色よ
あとiTermの配色をぽちぽちしているときに思ったのだけど、ここまでかわいい配色を作っちゃったし、せっかくならVSCodeのテーマもそれに合わせてあげたいわよね。
てことで、Draculaに負けないくらいかわいいテーマに変えてみたわ。
これがあたしのかわいいVSCode完成形よ
図11: これがあたしの「かわいい」よ！
ゆ、ゆめかわ〜〜〜〜〜〜！💕💕💕
いま適用したのはfairyflossというテーマよ。Draculaの落ち着いたかわいさとは対照的に、ふわふわで柔らかなかわいさって感じね。
ここまでかわいくなったVSCodeなら、自然と仕事をする手にも力が入るわ🥰
最後に
どうだったかしら、あなたのVSCodeもだいぶかわいくなったんじゃない？
今回紹介した以外にも色んなかわいいがあるはずだから、自分なりのかわいいを仲間同士でシェアするのも楽しいんじゃないかしら。
これからもかわいいを忘れずにね！
福里 優気／FIXER
テヨン大好きフロントエンジニア
[転載元]
あたしのVSCodeがこんなに可愛いわけがない。
