かわいいVScodeの作り方👁👄👁💗
かわいくないワ...👁👄👁
これではテンション上がりません。コーディングに置いてモチベーションは最も大事な栄養素です。
テーマを変更してモチベを上げていきます。
テーマを変更
illusion
お好みのテーマをダウンロードしてテーマを有効にします。
...いいんじゃない？👁👄👁
まだそこまでかわいくありません。
コーディングにおいて、インデントは最も大事な要素です。そんなに重要なものが光っていないのは怠慢という言葉を禁じ得ません。インデントを光らせていきます。
indent-rainbow
拡張機能を有効にしたらこうなっているはずです。
トーンが暗いわネ...👁👄👁
setting.jsonでハイライトの色を変えていきます。
"indentRainbow.colors": [
"rgba(128, 64, 64, 0.5)", // 1インデント目の色
"rgba(128, 96, 32, 0.5)", // 2インデント目の色
"rgba(128, 128, 32, 0.5)", // 3インデント目の色
"rgba( 32, 128, 32, 0.5)", // 4インデント目の色
"rgba( 32, 64, 128, 0.5)", // 5インデント目の色
"rgba(128, 64, 128, 0.5)" // 6インデント目の色
],
明るくてみやすいワ！...👁👄👁
テーマが変わるだけでもかなり変わりますね。ただ、フォントが少々トゲトゲしています。
「プログラミングやれよ、オラ。やれんだろ！？」と言われているようですね。
コーディングにおいて最も重要なフォントがこれでは台無しです。カワイくしていきます。
Merienda One
Yusei Magic
お好みの日本語フォント+英語フォントを「Download family」からダウンロードします。
ダウンロードしたらフォントをインストールします。
フォントをダウンロードできたら、VScodeにフォントを使用させます
setting.json
{
"editor.fontFamily": "'Merienda One', 'Yusei Magic'",
}
ちょっといいわね👁👄👁
ちょっとフォントが詰まってるのと、フォントを変更したことにより文字が小さくなってしまいました。
setting.jsonから調整していきます。
{
"editor.fontSize": 13,
"editor.letterSpacing": 0.5,
}
読み易くなりました。
既にかわいいVScodeになりましたが、まだ何かが足りません。そう、輝きが足りません。
タイピングする度にキラキラと輝いてもらわないとこっちは赤字です。輝かせていきます。
Power Mode
インストールして有効化したら、setting.jsonにpoweModeが動くように記述します。
setting.json
{
"powermode.enabled": true,
}
タイピングしてみましょう。
右上のカウンターの主張がすごい + タイピングする毎に画面がガタついています。
普段使いするとしたらストレスになってくるので、setting.jsonでオフにします。
setting.json
"powermode.combo.counterEnabled": "hide",
"powermode.combo.counterSize": 0,
"powermode.shake.intensity": 0,
タイピングしてみましょう。
やだあああ！！かわいいいいいいいい！！👁👄👁💗
👁👄👁←を太字にするためだけに見出しを使用したことをここに詫びます。
Discussion
あまりにも便利でかわいい VSCodeだったのでサーバー設定のサンプル記事を作るときの参考にさせていただきました。
かわいい VSCode を作る極意ありがとうございました。
ワイが半分白目むいて鼻水垂らしながら書いたアホみたいな記事が、美しい使われ方をして頂いて感動しています...！！！👁👄👁❤️←こいつも喜んでます