VSCode関連で独自にちょっとだけカスタマイズした環境設定を晒す(part. 2/3)

# はじめに
自分が主にMacで使ってるテキストエディタ[VSCode](https://code.visualstudio.com/)を使用しながら設定を少しずつ弄ったきたので、色々学習してきた内容を書きはじめる前に、まずはその紹介と使ってみた感想を述べていきます(長くなりそうなので、３回に分けて記事を書きます)。



# 前提条件

- macOS Catalina ( バージョン 10.15.7 )
- Visual Studio Code.app ( バージョン 1.55.2 )
- Terminal.app ( バージョン 2.10 )

※これらのバージョンはこの記事を書いた時のものであり、設定時のバージョンはこれよりも古い可能性があります。



# 環境設定
主に、以下の5つを実施しました。
1. 拡張機能の追加
2. テーマ(拡張機能の一つ)の実装
3. 表示されるプロンプトを短くかつ見やすくする
4. 設定項目一覧から幾つかの項目を変更
5. キーバインド

ここでは上の５つの内から、
3. 表示されるプロンプトを短くかつ見やすくする
について書いていきます。


### 3. 表示されるプロンプトを短くかつ見やすくする
ターミナルのデフォルトのプロンプトは、とにかく長ったらしくて見づらい。即改善すべし！

#### プロンプトの各パラメータを調べる
まずは、プロンプトを弄れるファイルを探して開きたいので、`cd ~`か`cd`とターミナルに打ってホームディレクトリにれっつごー(☝ ՞ਊ ՞)☝
シェルは**zsh**なので、`vim .zshrc`もしくは`vi .zshrc`で*.zshrc*を開く。このようなドット.で始まる設定ファイルは、VSCode等のソフトでは編集できない。
中身を見ると、

```~/.zshrc
(省略)
PS1="%n@%m %1~ %# "
(省略)
```
という記述がある。調べるとそれぞれには、

|コード|出力             |
|:--:|:--------------:|
| %n |ユーザ名          |
| %m |ホスト(コンピュータ)名|
| %~ |カレントディレクトリ   |
| %# |プロンプト右端の%   |

という意味があるようだ。なるほど、こいつがプロンプトの正体か。この`%~`の間に付けられる**正の整数は、カレントディレクトリを絶対パスで表したときに、カレントディレクトリを基準としてそれよりも上位のディレクトリをどこまで表示するかを指定できる**。例えばカレントディレクトリpiyo[^1]が絶対パスで、

[^1]: 「hoge」,「fuga」,「piyo」などは**メタ構文変数**といって、これらはいわゆる**プログラミング版の山田太郎さん**。例となるサンプルファイル等によく使われる。基本的にはhoge→fuga→piyoの順になっている。しかし、これらは日本だけで通じるメタ構文変数であって、海外では「foo」や「bar」などが主流のようだ。

```
~/hoge/fuga/piyo
```
と表される場合、上記PS1の`%1~`は*piyo*となり、`%2~`なら*fuga/piyo*となる、といった感じだ。因みに、この部分を**負の整数にすると、ルートディレクトリを基準としてそれよりも下位のサブディレクトリをどこまで表示するかを指定できる**。つまり、上記のカレントディレクトリが`%-1~`もしくは`%-~`という指定なら*~*となり、`%-2~`なら*~/hoge*となる。使い道があるかどうかは分からない。但し、これは**カレントディレクトリが`$HOME(ホームディレクトリ)`かそのサブディレクトリのときに、この`%~`のコードだと`$HOME`の部分が*~*に変換される**からであって、もし変換されないパターンで表示させたい場合は、%~の代わりに`%d`を用いる。

```
/Users/“ユーザー名”/hoge/fuga/piyo
```
このとき、`%-1d`もしくは`%-d`という指定なら*/Users*となり、`%-2d`なら*/Users/“ユーザー名”*となる。そして、もうお察しの通り、カレントディレクトリをフルパス(絶対パス)で表示させたい場合は、コードを`%~`か`%0~`、もしくは`%d`か`%0d`とすれば良い。

#### デフォルトのプロンプトの改善点
ここで、ターミナルのデフォルトプロンプトの宜しくない点を列挙しておく。

- 不要な情報が記載されてたりして冗長になっている
- ターミナル全体の背景色と同化していて、文字列も同色なので、コマンドとの境界が分かりづらい
- コマンド出力結果の後に空行が入らないため、上下の境界も分かりづらい

![before](https://i.gyazo.com/50dcfaa1592f095e03103823b5d4e594.png "デフォルト状態でechoコマンドを実行")

`echo`コマンドでPS1を出力してみた。うん、見づらい(笑)[^2]。`%`がプロンプトの右端を表しているので、どこからどこまでがプロンプトになっているのかが一応分かるようにはなっているが、上記の問題を一つずつ解決してより良いものにする。

そもそもホスト(コンピュータ)名を毎回ターミナルに表示させる意味はない。また、ユーザ名に関してもPCを一個人で使っている場合には必要ない。そのため、上の表よりPS1から`%m`と`%n`のコードを、およびアットマークの文字`@`をそれぞれ削除する。これだけでかなりシンプルになる。

[^2]: プライバシーを守るために、あえて`%n`と`%m`の部分をこういう表示にした。気にするレベルではないと思うが念には念を。実際の表示はこれよりも長い。

![after1](https://i.gyazo.com/b5a6be8bce6cffec2771d6c8bee9ad75.png "コンピュータ名とユーザ名を削除")

次に、プロンプトに色を付ける。該当範囲を`%F`と`%f`で括ると**文字列**が、`%K`と`%k`で括ると**背景**がそれぞれ変色される(背景色はマーカーを引いた感じになる)。今回は文字列を*黒色*に、背景を*黄色*にして目立たせる。

![after2](https://i.gyazo.com/cc0da68874bff1c3e2dc3c4157bc68f0.png "プロンプトを変色")

このままでも充分だと思うが、更に、コマンド出力結果後に空行が入るようにする。つまり言い換えると、**出力後、次のプロンプトを１行分改行した状態で表示されるようにする**。

![after3](https://i.gyazo.com/43cd15888ecca406c51abba69b68a7fb.png "空行を挟む")

これでヨシ！このように、`PS1=`の後を改行すれば良い。ただこれだと、ターミナル起動後の初期プロンプトにも最上部に空行が入ってしまうため、[この記事](https://qiita.com/hmmrjn/items/60d2a64c9e5bf7c0fe60#アウトプットの後に改行を入れる)なんかを参考にして、例外的に初回のみ空行が入らないように設定することもできるようだ([記事](https://qiita.com/hmmrjn/items/60d2a64c9e5bf7c0fe60#アウトプットの後に改行を入れる)内の設定ファイルは*.bashrc*だが、*.zshrc*にも応用できると思う)。

#### VSCode上で確認
さて、ここまでで一応ターミナル関連の設定は完了したが、この記事の本題は**VSCode関連の環境設定**なので、VSCodeに反映されてないと意味がない。`command + j`でパネルを表示させて*ターミナル*タブに切り替えると、上で行った設定のプロンプトがきちんと表示されている筈だ。



## 設定後の感想とこれからの課題
最初、デフォルトで使用してた当時はあまりにも見づらかったので、この改善は自分なりにかなり満足しています。ただこの記事を書いてて、`@1~`等の数字の‘1’の意味を調べて理解できたので、最終的にPS1は

```~/.zshrc
(省略)
PS1="
%K{yellow}%F{black}%~ %#%f%k "
(省略)
```
という形に落ち着きました。カレントディレクトリはフルパスで表示されていた方が良いかなぁと判断。ただこれだと階層が深くなると結局長くなってしまうんですが...(笑)
他にも調べると、ターミナル画面の両端にプロンプトを表示させたり、もっと色々な情報を載せたりすることもできるようですが、今回はそれらはナシで。ですがターミナルのカスタマイズはこれで終わりではなく、本格的にプロングラミングをするようになったら**もっとイケメンにしたい！**と考えています(笑)。今はVSCodeのパネルの小さな画面上でターミナルを使用していますが、ターミナルアプリの本体の方をこれからは主に動かしていきたいです。色々やれそうですが、**透明度を変えてスケスケにする**機能は絶対に取り入れます！そうすると、上で設定した配色だとかえって見づらくなってしまうので、その辺は要調整てことで(~~ちょっとした厨二病...~~)。また、[Pure](https://github.com/sindresorhus/pure)みたいな**プロンプト自体のテーマを変えられる**のもあるみたいなので、そういうのを使ってみても良いかもしれません。



# 参考記事
- [最短最速でターミナルカスタマイズをする。 - Qiita](https://qiita.com/y-hirako0928/items/30b6f8d0162dbb8ca486)
- [ターミナルプロンプトの表示・色の変更 - Qiita](https://qiita.com/hmmrjn/items/60d2a64c9e5bf7c0fe60)
- [Zsh - ArchWiki](https://wiki.archlinux.jp/index.php/Zsh)


# 関連投稿記事
- [VSCode関連で独自にちょっとだけカスタマイズした環境設定を晒す(part. 1/3) - Qiita](https://qiita.com/tsutsumin_pro/items/d03a61db36577ad23686)


# 次回予告
- [VSCode関連で独自にちょっとだけカスタマイズした環境設定を晒す(part. 3/3) - Qiita](https://qiita.com/tsutsumin_pro/items/79ef5eaac6a38d4af085)