【卍】ギャルのための開発環境カスタム


概要

やっぱギャルなら開発環境は可愛くなきゃだめっしょ? ってことで開発環境の見た目をめっかわにするカスタム方法をゆるめにまとめます🦄よろ〜

※機能性、利便性より可愛さを重視してご紹介します。
※本記事における「ギャル」の感覚は筆者の独自解釈に依るものですが、筆者の信念といたしましては「心がギャルならみんなギャル」です。ご了承いただける方のみお読みください。

対象OS: Mac
コードエディター: VSCode

1. ターミナル

まずはターミナルからやってくけど大丈夫そ?❤️‍🔥
ターミナルはMacデフォルトのでももちろんOKですが、おすすめはHyperです。
理由は可愛いからです。

https://hyper.is/

公式サイトからでも、homebrewでもインストールできます。

$ brew install --cask hyper

hyperの推しポイントは楽しいプラグインがたくさんあるところ。
以下、使用しているものをいくつかご紹介します。

(1) hyper-flat

こちらはカラーテーマ。シンプルながらパキッとした色合いで可愛いですね。

▲画像引用

インストール

$ hyper i hyper-flat

https://hyper.is/store/hyper-flat

(2) hyperborder

(1)hyper-flatと併用するのがおすすめなhyperborder
ターミナルのフチをアプリアイコンと同じピンク×オレンジに変更できるプラグインです。
かなりギャルみが出てきました。

インストール方法は、~/.hyper.jsの plugins 項目に'hyperborder'を追記し、アプリを再起動。

module.exports = {
  ...
  plugins: ['hyperborder']
  ...
}

https://github.com/webmatze/hyperborder

(3) hyperpower

hyperpowerは文字を打ち込むたびに火花(?)が吹き出るプラグインです。
いよいよ普通のターミナルからかけ離れてきたね〜


▲画像引用

インストール

$ hyper i hyperpower

https://hyper.is/store/hyperpower

(4) gitrocket

最後にgitrocketを入れましょう。
これはgit pushするとロケットが打ち上がります。まじでアゲじゃね?

インストール方法はまず~/.hyper_plugins内でnpm install gitrocket

$ cd ~/.hyper_plugins
$ npm install gitrocket

~/.hyper.jsのpluginsに追記しアプリを再起動します。

plugins: ['gitrocket']

https://github.com/bomanimc/gitrocket

1-1. プロンプト

ここまできたらプロンプトもこだわるっしょ?👼🤍
ということでターミナルを全体的にカスタムできたらプロンプト表示もこだわりたいですね。
zshにPreztoを使うと簡単に可愛いテーマに変更できます。

https://github.com/sorin-ionescu/prezto

Preztoのインストール方法はドキュメントをご覧ください

インストールできたら以下のプレビューコマンドでどんなデザインがあるか確認してみましょう。

$ prompt -p

hyperborderのピンク×オレンジと合わせるならfirefade magentaがおすすめ。
~/.zpreztorcの119行目あたりにあるzstyle ...の記述のthemeの後ろにテーマ名(+カラー)を入れることで変更することができます。

zstyle ':prezto:module:prompt' theme 'fire'
zstyle ':prezto:module:prompt' theme 'fade' 'magenta'

▼fire

▼fade magenta

仕上がってきたね〜👊

2. VSCode

VSCodeはこのカラーテーマ入れたら可愛すぎてまじしんどい。。😈🦋
という最強テーマもご紹介します。
最推しはSynthwave x Fluoromachine

▲画像引用

https://marketplace.visualstudio.com/items?itemName=webrender.synthwave-x-fluoromachine

適用してみるとこんな感じになります。

このテーマはSynthWave '84というカラーテーマのフォーク版なのですが、'84の方も可愛いので気分で使い分けたい。

あなたが歌舞伎町拠点のギャルならこのテーマもおすすめ。

https://marketplace.visualstudio.com/items?itemName=VictoriaDrake.kabukicho

まとめ


ということで開発環境がこんなに可愛くなりました💙🦄
みんなもカスタムして自分だけのギャルみな環境つくってこ卍