WindowsでMacのターミナルを再現する方法 – Hyper.jsを使ったカスタマイズ手順

こんにちは。
WindowsのターミナルをMacのターミナルぽくしたかったので、手順をまとめます。

最終的にはこんな感じになります。

Hyperの完成形

それではいってみよう！

動機
Hyper.jsのインストール
pluginの追加
wslの導入
wsl上でディレクトリがめちゃくちゃみづらい
キーバインドの変更
まとめ

動機

Windowsのコマンドプロンプト or Powershell使いづらい。。。
と思ったのがきっかけです。

転職を機に業務用PCがMacになったのですが、
やっぱり既存のターミナルがLinuxベースだととても使いやすいと改めて感じました。

使いやすいと感じた理由は以下の通りです。

Windowsのターミナルの場合、コマンドプロンプト or Powershellのコマンドを別途覚える必要がある
- Powershell側は、Linuxコマンドに近いエイリアスがあるもののオプションはまるで違うのでいちいち調べる必要がある。
結局、開発は、Dockerで環境作ることになることが多いので、Linuxのコマンドを覚える必要がある
何よりLinuxコマンドは、使いやすいものが多い。
- 最近は、Rust製のLinuxコマンドも出てきて、さらに使いやすくなってきた。

ということで、WindowsのターミナルをMacっぽくしてみたいと思います。

Hyper.jsのインストール

まずは公式サイトからhyperをダウンロードしてきて、インストールします。
https://hyper.is/

Hyper.jsは、Electronベースのターミナルアプリケーションです。
高度な機能を備えており、コマンドラインツールを使用して、Linux、macOS、Windowsなどのプラットフォームで簡単にコマンドを実行できます。
豊富なテーマとプラグインを提供し、非常にカスタマイズ性が高く、高速なパフォーマンスを実現します。

今回はlinuxコマンドが使いたいので、wslを利用しますが、コマンドプロンプトやPowershellでもHyper.jsは利用できます。

この後、いろいろ設定をしていきますが、とりあえずどんな感じになるか試したい方や　いちいち設定するのは面倒という方は、
githubに設定ファイルおいてるので、そちらをお使いください。
https://github.com/nogu3/settingsForWindows/tree/main/hyper

pluginの追加

次にHyperを使いやすくするため、pluginを入れていきます。
まずはテーマをMacぽくするためのプラグインを入れます。

入れるテーマは、以下の通りです。

hyper-iceberg
ターミナルをより見やすくカスタマイズできるようになります。
コマンドを入力するときに表示されるテーマを変更したり、ターミナルの背景色を変更したり、フォントを変更したりなどができます。
公式サイト:https://github.com/cocopon/hyper-iceberg

hyper-opacity
Hyper.jsで使用できるプラグインで、ターミナルの背景の透明度を変更することができます。
背景の透明度を調整することで、ターミナルの見た目をカスタマイズすることができます。
参考サイト:https://matcha-choco010.net/2018/07/01/wsl-hyper-terminal/

設定ファイルは、以下パス配下の.hyper.jsのことを指します。
エクスプローラー(Windows + e)で以下パスを開いて、任意のエディタでhyper.jsを開いてください。

%APPDATA%\Hyper

具体的な設定値は、以下の通り

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // 起動時のシェルをwslに変更する
    shell: 'c:\\Windows\\System32\\wsl.exe',

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    // hyper-opacityの設定
    opacity: {
      focus: 0.9,
      blur: 0.65,
    }

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  // pluginのinstall
  plugins: [
    // iceberg theme
    'hyper-iceberg',
    // half transparent plugin
    'hyper-opacity'
  ],

wslの導入

最近のmacはデフォルトでzshが使えます。
windowsでは、コマンドプロンプト or Powershellなので、wslを導入してよりMacに近づけます。

wslの仕組みについては、以下の漫画がとてもわかりやすかったです。
windows側のディレクトリまでwslでいけるんか？やwslのインストールなどわかるので、一読をおすすめします。
https://system-admin-girl.com/comic/begins/sp-wsl/

ただ、自分のWindowsバージョンでは、Windows Subsystem for Linuxがありませんでした。
調べたところ、　それはバージョンが新しいためで、今はLinux用Windowsサブシステムという名称になっているようです。
※私の場合、デフォルトでLinux用WindowsサブシステムがONになっていました。
https://qiita.com/taraka/items/0b5919ac8ee02d81f7ff

wsl上でディレクトリがめちゃくちゃみづらい

インストールしたてほやほやの状態だとlsしてもディレクトリ部分がとても見づらいです。

そのため、以下サイトを参考に設定することで、ディレクトリ部分にハイライトされず見やすくなります。
https://arakan-pgm-ai.hatenablog.com/entry/2022/11/07/000000

キーバインドの変更

windowsのhyperでは、コピペのショートカットが通常のコピペ+shiftのキーマップになっています。

copy -> ctrl + shift + c
paste -> ctrl + shift + v

通常のctrl+cには、コマンドの中断(break)が鎮座しているので、ctrl + .(ドット)　に変更します。
(macのターミナルでは、ctrl+cだけではなく、ctrl + .も使えるので、そちらに合わせます)

いちいちshiftを使うのは、不便なので、設定ファイルに以下のようなキーマップ設定を入れます

~~~~~~~~~

  keymaps: {
    "editor:copy": "ctrl+c",
    "editor:paste": "ctrl+v",
    "editor:break": "ctrl+.",
  },
};

他のキーマップを変更したい場合、Windows標準のキーマップは以下に定義されているので、参考に定義してみるとよいかと思います。
ただし、同じキーマップを別のコマンドに割り当てるとうまくいかないようなので、そのあたりは注意してください。
（競合したコマンドをほぼ使わないのであれば、絶対つかわないようなキーマップに割り当ててしまうのも一つの手です。）
https://github.com/vercel/hyper/blob/master/app/keymaps/win32.json