1
0

【VSCode】かわいいエディタの作り方

Last updated at Posted at 2024-05-08

はじめに

VSCodeに自分の中のかわいいを詰め込んだ時の拡張機能と設定を紹介します。
私自身はダークモード派ですが、ダークモードだとどうしても理想のかわいいに辿り着けなかったのでライトモードのみの紹介です。

1. soft era

パステルピンク×パステルブルーの可愛らしいテーマです。

スクリーンショット 2024-05-08 17.08.01.png

このままでも勿論かわいいテーマですが、一致する括弧の背景色や括弧ボックスの色が暗く、括弧の種類が個人的に見づらいので変更します。

スクリーンショット 2024-05-08 17.10.07.png

手順
  1. VSCode内の左下⚙️マークから設定に飛ぶ
  2. 検索ボックスに「Workbench: Color Customizations」と入力し「Workbench: Color Customizations」下の「settings.jsonで編集」を押下し、設定ファイルに移動する
  3. 「"workbench.colorCustomizations": {}」内に「"editorBracketMatch.background": "#fdf8f8aa","editorBracketMatch.border": "#f7bee4"」と追記する

スクリーンショット 2024-05-08 17.11.13.png

するとこのように背景色が明るくなり、判別がしやすくなりました。

2. Celestial Magic Girl Icon Theme

魔法少女を連想させる可愛らしいアイコンテーマです。正直Material Icon Themeの方が開発する上では見やすいですが、可愛さのために社用も私用もこのアイコンを使用しています。

スクリーンショット 2024-05-08 17.12.55.png

3. nyan-mode

ファイル内をスクロールすると進んだ分だけ猫が歩きます。常に猫を動かすこともできるのですが、視界がうるさくなるので私はデフォルト設定のままです。

スクリーンショット 2024-05-08 17.13.45.png

うにょうにょしていてかわいいですし、ファイルの位置がなんとなく分かるので便利です。

スクリーンショット 2024-05-08 17.14.31.png

さいごに

見やすく便利であることも大事ですが、可愛さも追求していきたいです。
もし、他にもかわいい拡張機能があれば教えていただきたいです。
最後まで見てくださりありがとうございました!

1
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0