ターミナルを見やすくした

ターミナルを見やすくした

macのターミナルを見やすくした話です。

結果はこんな感じです。

image

アプリケーションをインストールすることなく、30分くらいで簡単にできますのでぜひ試してみてください。

やったこと

  • プロンプト(%とか$のこと)より前の部分をユーザー名/カレントディレクトリにした
  • プロンプトより前の部分の表示に色を入れた
  • lsコマンドを実行した時にフォルダとファイルに色がつくようにした
  • コマンド実行後に1行改行を入れた
  • 文字フォント・サイズを変えた

なんでやったの?

  • ターミナルを使う業務をやりやすくするため(事務ミスがちょいちょいあった…)
  • 最近githubを使ったバージョン管理の練習をしているので見やすくしたかった

前提

  • mac使用者向けです
  • zshで説明します
  • bash での設定方法は最後にまとめて書いていますので、zshについての記述を参考にしながら入力してみてください
  • zsh、bashとは

    zsh、bashとはシェルの種類のことです。自分の設定がわからない場合は、ターミナルを開いてバナー部分(上の部分)をみると確認できます。

    image

    ターミナルで以下のコマンドを入力して確認することもできます。

    zshでした。

    echo $SHELL
    image
  • 色をつけたり文字フォント大きくしたりとか見た目に特化したものになってまして、効率的に開発できる、といったような目的ではないです
  • 1~4は同じファイルに記述するものを理解しやすくするためにあえてstepを分けていますので、一度に書き込んで反映させても問題ないです

内容

1. プロンプトより前の部分をユーザー名/カレントディレクトリにした

ざっくりいうと、zshを実行するときに毎度適用されるファイルを作成して、そこに指示を書き込むイメージです。

1..zshrcファイルを作成する(すでにある場合は不要)

ファイルが存在するか確認する方法

以下のコマンドを入力することで、.zshrcファイルが既にあるか確認できます

  • ホームディレクトリに移動
% cd ~
  • 隠しファイルの一覧を表示する
% ls -a
  • .zshrcがあるか確認する

ホームディレクトリに移動する

% cd ~

ファイルを作成する

% touch .zshrc

2..zshrc ファイルを編集する

viエディタで編集する(viエディタはメモ帳のようなもの)

% vi .zshrc

こんな表示になってるはず

image

^ この表示が出たら以下をコピペする(これがプロンプトより前の部分を決める記述) %n は「ユーザ名」、%d は「カレントディレクトリ」、%# は「ユーザー種別(%とか$とか」です

PS1="%n:%d %# "

以下のコマンドを打つ

:wq

Enterを押す

3.設定を反映する

% source .zshrc

4.できた

image

memo

  • PS1 = の次にあるダブルクォーテーション内に表示項目のパラメータを挿入します
    • 今回はユーザー名・カレントディレクトリ・ユーザー種別(%)を出してます
    • ユーザー名とカレントディレクトリの間に「:」を入れて、ユーザー種別(%)の間とその後ろに半角スペースを入れてます
    • 順番変えたり文字列入れられるので好きなように試してみてください
    • メジャーなのはこのへんぽい
      %n   ユーザ名
      %m   ホスト名
      %M   ホスト名
      %~   カレントディレクトリ
      %d   カレントディレクトリ
      %c   カレントディレクトリ(相対パス)
      %C   カレントディレクトリ(相対パス)
      %#   ユーザ種別
      %?   直前のコマンドの戻り値
      %D   日付(yy-mm-dd)
      %W   日付(yy/mm/dd)
      %w   日付(day dd)
      %*   時間(hh:flag_mm:ss)
      %T   時間(hh:mm)
      %t   時間(hh:mm(am/pm))
  • viコマンドはいろいろありますが、今回使用するのは以下です

2. プロンプトより前の部分の表示に色を入れた

さっきのPS1= 部分に書いた記述に追記します。

1..zshrcファイルを編集する

viエディタで編集する

% vi .zshrc

PS1= の部分に%F{色の指定} パラメータ %f で色をつける記述を入れる

例えば、ユーザ名をマゼンタ、カレントディレクトリを黄色にするときはこんな感じ

PS1="%F{magenta}%n%f:%F{yellow}%d%f %# "

2.設定を反映する

% source .zshrc

3.できた

image

3. lsコマンドを実行した時にフォルダとファイルに色がつくようにした

lsコマンドを実行するときは ls -G が実行されるように設定します。

1..zshrcファイルを編集する

viエディタで編集する

% vi .zshrc

先ほど設定した PS1= … の記述の下に追記する

まず編集モードにするために「i」を押す(最下部に「—INSERT—」って出たらおk)

i

カーソルで1~2行くらい空けて以下を追記する

# lsをls -Gへ
alias ls="ls -G"

こんなイメージ

image

esc して保存して終了する

esc キーを押す
:wq

2.設定を反映する

% source .zshrc

3.できた

image

4. コマンド実行後に1行改行を入れた

1~3と同じく、.zshrcファイルに追記します。

1..zshrcファイルを編集する

viエディタで編集する

% vi .zshrc

これまで設定した記述の下に追記する

まず編集モードにする

i

カーソルで1~2行くらい空けて以下を追記する

# コマンドの実行ごとに改行
function precmd() {
    # Print a newline before the prompt, unless it's the
    # first prompt in the process.
    if [ -z "$NEW_LINE_BEFORE_PROMPT" ]; then
        NEW_LINE_BEFORE_PROMPT=1
    elif [ "$NEW_LINE_BEFORE_PROMPT" -eq 1 ]; then
        echo ""
    fi
}

esc して保存して終了する

esc キーを押す
:wq

2.設定を反映する

% source .zshrc

3.できた

image

5. 文字フォント・サイズを変えた

ターミナルの環境設定を変更して文字を大きくしたり、フォントを変えたりします。

1.ターミナルの環境設定を開く

image

2.設定を変更する

自分は以下の設定にしています

  • フォント:Menlo Regular
  • 文字サイズ:18
  • テーマ:Pro
  • カーソル:垂直バー、点滅カーソル
  • カーソルの色:明るい緑
  • image

bashの方はコチラ

1~4の設定について

ファイルを作成する(※bashの場合は .bash_profile も作成する)

 % touch .bashrc 
 % touch .bash_profile

.bashrc ファイルを編集する

% vi .bashrc

プロンプトより前の部分の変更と色を付けるために以下をコピペする(1~2の設定)

export PS1="\[\e[32m\]\u\[\e[0m\]:\[\e[33m\]\w\[\e[0m\] $ "

ファイルとフォルダを色付けするために以下もコピペする(3の設定)

alias ls='ls -G'

実行後に1行空けるために以下もコピペする(4の設定)

function add_line {
  if [[ -z "${PS1_NEWLINE_LOGIN}" ]]; then
    PS1_NEWLINE_LOGIN=true
  else
    printf '\n'
  fi
}
PROMPT_COMMAND='add_line'

bash_profileも編集する

% vi .bash_profile

以下をコピペする

if [ -f ~/.bashrc ]; then
  . ~/.bashrc
fi

esc してから :wqを入力する(これで保存される)

いかがでしたか

30分くらいでできましたでしょうか?

この内容を社内で共有したところ、エンジニアの方々はもっとカスタマイズしている話を聞きました。また良さそうな設定見つけたら追記します。

おしまい