WSL2+fish+CicaでWidnowsにお洒落なシェルを構築する

投稿者: | 2021年3月2日

Macの方のbashをfishに変えて数ヶ月経ちました。とても使いやすいのでWSLのbashもfishに変えようと思いました。

環境はWSL2のUbuntu 18.04.5 LTS。Windows Terminal上で使っています。

1.fish bashのインストール

公式のやり方に沿ってインストールします。

sudo apt-add-repository ppa:fish-shell/release-3
sudo apt-get update
sudo apt-get install fish

ついでにfishをデフォルトシェルにします。

chsh

パスワードを入力後、デフォルトにするシェルのパスを聞いてくるのでfishのある場所を入力します。

/usr/bin/fish

一度ターミナルを終了し、再起動します。

2-1.追記

最初は次のような方法でできていましたが、現在はレポジトリが見つからないため使うことができません。

公式のやり方に乗っ取りインストールします。

sudo apt-add-repository ppa:fish-bash/release-3
sudo apt-get update
sudo apt-get install fish

2.fihserのインストール

2-1.fishのバージョン確認

再起動したらfishが起動していることを確認します。また、fishのバージョンを確認します。

fish -v     
fish, version 3.2.0

バージョンが3以上であることが重要です。

2-2.バージョンが2以下のとき

古いネット記事のコマンドを入力するとversion 2.x.xのfishがインストールされていることがあります。この状態だとfisherのインストールするときに打つコマンドが使えないため、一度削除して、公式のやり方でインストールし直してください。

2-3.fisherをインストール

fisher公式に則ってインストールします。

curl -sL https://git.io/fisher | source && fisher install jorgebucaran/fisher

バージョンが2以下のときになぜこのコマンドが使えないかというと、fish v2では&&や||の記号が使えなかったからです。このコマンドはfish v3に対応した書き方のため、fish v3以上でないと正しくコマンドが認識されません。

参考:fish3.0がやってきた

2-4.oh-my-fishをインストールする

fisher install oh-my-fish/theme-bobthefish

3.文字化けを直す

次の画像のように文字化けしている場合があります。

mojibake

これではあまりに見栄えが悪いので、文字化けを修正していきます。

文字化けの原因はフォントが対応していないからです。そのため、いい感じのフォントを入れると直ります。

調べて出てくるのはpowerlineフォントですが、私が今回導入したのはCicaと言うプログラミング用日本語等幅フォントです。

[必要ではない]3-1.Ubuntuにフォントをインストール

ubuntu20.04にCIcaフォントをインストールするを参考に作業を進めました。

curl -L -O https://github.com/miiton/Cica/releases/download/v5.0.2/Cica_v5.0.2_with_emoji.zip
unzip Cica_v5.0.2_with_emoji.zip 

unzipがインストールされていない場合は、

sudo apt install unzip

が必要です。

sudo mkdir  /usr/share/fonts/truetype/cica
sudo cp *.ttf /usr/share/fonts/truetype/cica/
sudo fc-cache -vf
fc-list | grep -i cica

3-2.Windowsにフォントをインストール

Cicaからフォントをダウンロードしてインストールします。

[必要ではない]3-3.WSLのフォントをCicaに変更

Windows Terminalからではなく、Windowsキーを押してプログラム一覧にあるUbuntu 18.04 LTSなどをクリックして起動します。(このときUbuntuで動いているfishは文字化けしていない場合があります。)

タイトルバーを右クリックしてプロパティを開きます。

WSL

フォントにCicaを選びます。

3-4.Windows Terminalのフォントを変更する

widows Terminalを起動し、∨のマークをクリックし設定を開きます。またはCtrl+,で開きます。初めて起動するときはjsonファイルを何で開くか聞かれるので、お好みのエディタで開きます。

font_setting

Ubuntuのプロファイル部分にfontFaceを追記して保存します。このとき、前の行の末尾にカンマをつけることを忘れないでください。

4.Windows Terminalを再起動する

Windows Terminalを再起動すると文字化けが直っているはずです。

fix_mojibake

ちゃんと□ではなく尖った図形が描かれています。見やすい。

5.VSCodeの統合ターミナルのフォントも変更する

VSCodeの統合ターミナルの方もきれいにします。VSCodeの設定を開いて、設定の検索に"Fontfamily"と入れます。そして、"Trminal › Integrated: Font Family"という項目を見つけ、テキストボック内をCicaに変更します。

何故か矢印の形が違うのが気になりますが、文字化けが直ったからヨシ!

6.おわりに

文字化けが直せたので、とてもきれいなシェルになりました。

これでMac環境からWindows環境にbashも移せたので本格的にWindows環境でプログラミングできる。

7.参考文献

fish-bash

jorgebucaran/fisher

mitton/Cica

WSLでお手軽におしゃれfish環境構築

fish bashが結構良かった話

fish 3.0がやってきた

Ubuntu 20.04にCicaフォントをインストールする

【Windows10】WSL2のインストールとフォント設定

WIndows Terminal Tips

VS Codeでフォントを変更するには

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください