1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-04-18

はじめに

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

前提条件

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

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

環境設定

主に、以下の5つを実施しました。

  1. 拡張機能の追加
  2. テーマ(拡張機能の一つ)の実装
  3. 表示されるプロンプトを短くかつ見やすくする
  4. 設定項目一覧から幾つかの項目を変更
  5. キーバインド

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

3. 表示されるプロンプトを短くかつ見やすくする

ターミナルのデフォルトのプロンプトは、とにかく長ったらしくて見づらい。即改善すべし!

プロンプトの各パラメータを調べる

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

~/.zshrc
(省略)
PS1="%n@%m %1~ %# "
(省略)

という記述がある。調べるとそれぞれには、

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

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

~/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

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

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

after1

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

after2

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

after3

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

VSCode上で確認

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

設定後の感想とこれからの課題

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

~/.zshrc
(省略)
PS1="
%K{yellow}%F{black}%~ %#%f%k "
(省略)

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

参考記事

関連投稿記事

次回予告

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

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?