iTerm2を可愛く便利にカスタマイズ

プログラミング学習を始めた頃にデフォルトのターミナルはダサい！！と言われ、iTerm2を勧められました。
調子が悪いこともあり、使いやすくカスタマイズしてみました。
まだまだ使いこなせてないので、可愛くして学習や業務のモチベーションアップしたいと思います。


# iTerm2のインストール
まず[iTerm2](https://iterm2.com/)をインストールする


### Homebrewのインストール
```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

### iTerm2のインストール
```
brew install --cask iterm2
```
![B3C4FF0D-7946-4CBD-B577-AF43C6204B28_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920283/4073964c-5b4b-40d9-cf65-e38d3ea22f26.jpeg)





### デフォルトはこんな感じ
![E9B20A9B-614E-4554-A04A-EA0CA004C9CB_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920283/f9b16f44-9245-3181-33b5-c00321dbd0c7.jpeg)



### Last login:は表示しないようにする

![F60950ED-07C8-4912-8F55-FA41F5F5E2F2_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920283/c9fa0891-f879-33a1-4a61-50c9496a6191.jpeg)




iTerm2のSetting->Advanced->tip of the dayを検索->Disable the Tio of the Day? をYesに設定する
![A839EDC6-532B-4600-89D1-A0083BFC7726_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920283/6a185000-b5a7-5528-03ab-3b263dec6d90.jpeg)

### あれ？反映しない・・・
って場合は.hushloginファイルをルートディレクトリに作成する
touch ~/.hushlogin

![F60950ED-07C8-4912-8F55-FA41F5F5E2F2_1_105_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920283/e67c8a64-3f32-ef32-0282-6f6daeffcc7d.jpeg)




### oh-my-zshのインストール

```
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
```

### こんな画面になっていれば成功
![E5D0E568-0DB6-4B37-B6D7-F0ED0ECB7A84_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920283/a9769953-52d4-d007-0cdb-125466c1ea6a.jpeg)
![25D8B942-A949-44B3-8851-0CE547B23A82_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920283/fb6eebf3-a2b0-f8fc-6629-6b02ba08f1a7.jpeg)


### カレントディレクトリの表示も変わっている
```
![25D8B942-A949-44B3-8851-0CE547B23A82_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920283/321932a0-a684-17db-f6dc-c69a8911b985.jpeg)
```


### .zshrc ファイル作成状況の確認
```
cat ~/.zshrc
```

## カラースキームのダウンロード
[iterm2-getafe](https://github.com/larssmit/iterm2-getafe)へアクセス
Download ZIPをダウンロードし、getafe.itermcolors

![B6440FB8-D91F-4F6A-84B4-E4633D59D5F1_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920283/415480b8-6e2c-95bc-f3b6-a8c1924eaccb.jpeg)


## テーマを選択
[Themes](https://github.com/ohmyzsh/ohmyzsh/wiki/themes) にアクセスし、好きなのを選択する。

見慣れた感じのysを選択

```
vim ~/.zshrc
```


### ファイル内容を確認する



デフォルトはrobbyrussellに設定されているので好きなテーマに変更する。

![486C9D3B-01E9-479F-9153-2816FC775982_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920283/b238b413-eff0-885c-b7bf-e09475b5d99d.jpeg)


```
ZSH_THEM="選択するThema"
```

### 変更の反映
忘れないように実行すること
```
source ~/.zshrc
```

### iTerm2の再起動
カレントディレクトリの表示が$に変更されていることを確認

![13AB272E-D029-4535-B325-8C811D84018F_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920283/d4f6ae57-f7d6-7446-9811-3a9b1aa66021.jpeg)

一番便利だと感じているのはgitの状態が表示すること！！
ディレクトリはもちろん表示してる
- カレントブランチ
- commitしてない場合：❌
- 差分がなくなった場合：⭕️
お陰で`git branch`や`git status`の確認が格段に減った。

![55043CB3-A3D2-438C-AFFD-AA2CE3529569_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920283/b3e8c30b-bb46-f687-fa03-3927b5c28bdf.jpeg)



## カラーをカスタマイズ
### [Iterm2-color-schemes](https://iterm2colorschemes.com/)にアクセスし、好みのテーマを選択する

Sakuraを選択
クリックすると[リンク](https://raw.githubusercontent.com/mbadolato/iTerm2-Color-Schemes/master/schemes/Sakura.itermcolors)が表示される。

### .itermcolorsを作成
選択したThemaのリンク先をコピーして.itermcolorsファイルを作成する。

コマンド実行
```
nano ~/Downloads/Sakura.itermcolors
```

- リンク先のXMLコード全体を貼り付ける。

`⌃ + O`：保存確認

`File Name to Write: ~/Downloads/Sakura.itermcolors`と表示
`Enter`：保存
`⌃ + X`：エディタを閉じる

![6FC9685A-7D47-4906-A41B-3F5AC7B7B4EB_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920283/1faf9139-8475-8a9a-8275-1eef181ed33a.jpeg)

- 正常に保存されているか確認
```
cat ~/Downloads/Sakura.itermcolors
```

### color schemaをインポート
iTerm2->Settings->Profiles->Color Presets->importの順に選択し、ローカルフォルダから`Sakura.itermcolors`を選択する。
![1118D753-B426-46FA-AD89-FB8BF7F1131E_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920283/b6800341-5498-98e3-f625-e706c822577e.jpeg)

`Add duplicate color preset?`が表示したら`Add it anyway`を選択
![1D849531-B754-4066-97CB-833A88EEE253_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920283/08978231-4e7f-5585-0447-11bb48a22676.jpeg)

`Color Peresets`から`Sakura`を選択する。

### Color Presetsを削除したい
削除したいプリセットを選択した状態で`Delete Preset...`を選択

Select a preset to deleteで削除したいプリセットを選択->OKを押下

![5A36E34E-397A-430E-8E39-E9A6791A8854_1_201_a.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920283/829c28f7-2975-23eb-bfe1-c5457f0be27d.jpeg)

## プラグイン
### コメントをシンタックスハイライト
`zsh-syntax-highlighting`をインストールする

```
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
```

### 予測補完
コマンドの入力補完候補の提案
`zsh-autosuggestions`をインストールする
```
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
 ```

 ### 補完オプションの拡張
 `zsh-completions`
コマンドの補完スクリプトを追加し、補完機能を拡張する
 ```
 git clone https://github.com/zsh-users/zsh-completions ${ZSH_CUSTOM:-${ZSH:-~/.oh-my-zsh}/custom}/plugins/zsh-completions
 ```

 ### Node.jsのバージョン管理
 `zsh-nvm`
 Node Version Managerのプラグインで、簡単にNode.jsのバージョン管理ができる
 ```
 git clone https://github.com/lukechilds/zsh-nvm.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-nvm
```

### コマンド履歴の検索
`zsh-history-substring-search`
過去に実行したコマンドを呼び出せる
```
git clone https://github.com/zsh-users/zsh-history-substring-search ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-history-substring-search
```

### 括弧やクォートを自動補完
`zsh-autopair`

```
git clone https://github.com/hlissner/zsh-autopair ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autopair
```


- zshrcの編集
`vim ~/.zshrc`
`plugins=(git)`を編集
```
plugins=(git zsh-syntax-highlighting zsh-autosuggestions zsh-completions zsh-nvm zsh-history-substring-search zsh-autopair)
```

- 設定の反映
```
source ~/.zshrc
```

- 正しいディレクトリにインストールされているか確認
`ls ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins`

![C56C4278-4EDC-458F-97EA-D89062CCD69E_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920283/fa23bd07-d709-7e34-ee7a-d3a3486e4cb0.jpeg)


### 動作確認
- zsh-syntax-highlighting
コメントがハイライトされていれば成功
![19A1D1A7-DF09-4C66-BAD1-E5F36A9511D1_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920283/5c568210-69e8-89e3-a7b7-357eae7eb30d.jpeg)

<br>

- zsh-nvm
```
nvm --version
```
バージョン情報が確認できれば成功
![3A8CAFB5-B4C1-42D0-9965-4A0214F5F470_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920283/7ac8fd5b-e9ac-19d9-0c7b-58dd66027736.jpeg)

- うまくいかない場合
バージョン情報が表示されない

![33036DFF-3990-4BD2-BC8A-37E55B18AFD0_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2920283/8cd3c908-841d-04b7-b355-83337bca3aac.jpeg)

nvmのインストールスクリプトを直接実行する
```
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash
```

nvmがロードされるように.zshrcの最後に以下を追加
```
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
```

再度.zshrcを読み込み
```
nvm --version
```