vimの使い方・カスタマイズを学習

普段使用するテキストエディタは`VScode`ですが、Docker環境で開発をする時など、将来的に`vim`を扱うことも出てくるかもなぁと思い、初心者ながら`vim`の扱い方やカスタマイズ方法について学習し、その記録を本記事に記していきます。

## 自身の利用デバイスと環境
- Macbook Air (2020)
- M1チップ
- macOS Monterey バージョン12.3.1

## vimとは？
- `vim`とは、Linux向けのテキストエディタである。
- `visual editor`または`visual interface`の略称だと言われてるっぽい。
- Linuxで人気のエディタであり、Linux環境でインストールされている。
- MacOSでも使える。
- Windowsの場合は、そのままでは使えないので別途設定が必要。（参考：https://original-game.com/windows-vim/）
- `vi`の進化版が`vim`だと、ざっくり覚えておく。


## 現在のvimの設定を確認する。
- こちらのサイトを参考にさせていただきました。
- https://bacchi.me/linux/check-current-status/
- まず`ls -a`コマンドで.vimがどこに入っているのかを確認。


```terminal:ターミナル
.gitconfig	.node-gyp	.vim	.zsh_history
```
- ありました。
- ホームディレクトリの配下に隠しファイルとしてあるようです。
- ホームディレクトリで`vim`と叩くと、バージョンが確認します。
- `~/ vim`

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3486945/e5ad94fc-89e5-2b78-e023-ed9bb2e2bd89.jpeg" alt="vimのバージョン" width=50%>



## vimの操作方法を覚える。
- こちらのサイトを参考にさせていただきました。
- https://blog.proglus.jp/4194/
- https://original-game.com/vim-mac9/


```terminal:terminal
$ vim ファイル名
対象のファイルをvimで開く
```

```vim:vim
i
編集モードを起動する。
```

```vim:vim
esc
編集モードを終了し、ノーマルモード（閲覧）に戻す。
```

```vim:vim
:q
ファイルを終了する
```

```vim:vim
:q!
強制的にファイルを終了する
```

```vim:vim
:w
編集したファイルを保存する
```

```vim:vim
:wq
編集したファイルを保存して閉じる
```

```vim:vim
0
カーソルを行頭に移動させる（ノーマルモードで「0」コマンドを入力）
```


- 万が一、vimの操作を間違えてしまったりして、動かなくなってしまったり、、、。
- 予期せぬ上書き保存をしてしまった場合は、とりあえず、Google検索して調べてみる。
- あるいは、おとなしくVScodeなど、自分の扱いやすいエディタを開いて確認してみるのが無難。





## vimのカスタマイズ方法
- 参考サイトはこちらを利用させていただきます。
- https://qiita.com/Broccolingual/items/8facc5f36564b987807f
- 以下、`.vimrc`のコードをまるっと引用させていただきます。

```.vimrc
set number " 行番号の追加
set cursorline " 編集中の行をハイライト
set ruler " 右下にカーソルの位置を表示
set showcmd " 入力中のコマンドを表示
set title " タイトルの追加
syntax enable " シンタックスハイライトを有効化
set wildmenu " vim上からファイルを選択できる機能を有効化
set ambiwidth=double " 全角文字の重なりを解消
set backspace=indent,eol,start " 挿入モードでbackspaceを使って削除を可能に
set laststatus=2 " ステータスバーを2行表示
set history=1000 " コマンドの履歴を1000件保存
set showmatch " 対応する括弧をハイライト
set smartindent " 前の行のインデントを保持
set clipboard+=unnamed " ヤンクの結果をクリップボードに保存
set noerrorbells " エラーの表示時にビープ音を鳴らさない
set mouse=a " マウスの有効化

set shiftwidth=0 " タブの設定(タブ幅4の場合)
set softtabstop=4
set tabstop=4

autocmd FileType python setlocal tabstop=4 " 言語ごとにタブ幅を設定する場合

set hlsearch " 検索結果をハイライト
set incsearch " 最初の一文字を入力した時点から検索開始
set wrapscan " ファイル末尾に到達すると再び先頭から検索
```
引用：https://qiita.com/Broccolingual/items/8facc5f36564b987807f


- 行番号を追加するコマンドやマウスの有効化など、vimを使いやすくするためのカスタムが設定できるようです。
- そのままのvimだと、扱いづらさを感じてしまうため、上記のようにカスタムするのが、
- 初心者のうちは、ひとまず良いんじゃないかと感じます。
- 今回は先人の設定をそのまま真似させていただくことにします。


## .vimrcを作成して設定を実装する

- 早速カスタマイズの設定を行なっていきます。
- まずは、ホームディレクトリにて、`.vimrc`というファイルを作成します。
- 


```terminal
$ vim ~/.vimrc
```

- `$ touch .vimrc`こっちでもいいのかなぁ？
- 良くわかりませんが、、とりあえず、参考サイトに沿って`$ vim ~/.vimrc`コマンドでファイルを作成していきます。
- `$ vim ~/.vimrc`でファイルを作成し、
- `i`で編集モードにして
- 参考サイトから拝借したコードをコピペ
- `esc`キーで編集モードから戻り、
- `:w`で保存
- `:q`でファイルを閉じる
- `$ ls -a`コマンドでファイルが生成されていることを確認。
- もう一度`$ vim ~/.vimrc`ファイルを開いてみると、、、、
- こんな感じのエディタが出現しました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3486945/427d64fa-3438-7546-af19-cea1c5beeb24.jpeg" alt="vimカスタマイズ後" width=50%>

- 行番号が表示されるようになって、わかりやすくなりました。
- マウス操作も可能に
- カーソルや行の現在地がわかりやすく可視化されています。
- まぁまぁ良い感じ！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3486945/8a2b1b05-19be-38c7-2343-3356a3546bd7.jpeg" alt="htmlファイルをvimで開いた画面" width=50%>

- 試しに他のファイルも確認してみます。
- 良い感じで、色がついて、見やすくなりました。
- また、少々色味が`ヴィヴィット過ぎて`、目が疲れそう、、？
- カーソル移動もできますね。
- 現状だと、`fn`+`十字キー`で行末に飛んだりできるっぽいことを確認してますが、まだ使い慣れませんね💦
- とはいえ、少しvimを使ってみたくなるようなカスタマイズをすることができました。
- 今後を考えて、vimの扱いに少しでも慣れて置けるようにしていきます。


## 少し自分用にカスタマイズを変更した結果
```.vimrc
set number " 行番号の追加
set cursorline " 編集中の行をハイライト
set ruler " 右下にカーソルの位置を表示
set showcmd " 入力中のコマンドを表示
set title " タイトルの追加
syntax enable " シンタックスハイライトを有効化
set wildmenu " vim上からファイルを選択できる機能を有効化
set ambiwidth=double " 全角文字の重なりを解消
set backspace=indent,eol,start " 挿入モードでbackspaceを使って削除を可能に
set laststatus=2 " ステータスバーを2行表示
set history=1000 " コマンドの履歴を1000件保存
set showmatch " 対応する括弧をハイライト
set smartindent " 前の行のインデントを保持
set clipboard+=unnamed " ヤンクの結果をクリップボードに保存
set noerrorbells " エラーの表示時にビープ音を鳴らさない
set mouse=a " マウスの有効化

set shiftwidth=0 " タブの設定(タブ幅2の場合)
set softtabstop=2
set tabstop=2

autocmd FileType ruby setlocal tabstop=2 " 言語ごとにタブ幅を設定する場合

set hlsearch " 検索結果をハイライト
set incsearch " 最初の一文字を入力した時点から検索開始
set wrapscan " ファイル末尾に到達すると再び先頭から検索
```

- タブ幅は個人的に2が好きなので、変更しました。
- また、使用する言語が今のところ`ruby`が多いので、`python`から変更してます。

## 最後に
- `vim`では、コピーのことを`yank`と呼ぶらしく、`y`がコピーコマンドになるそうです💦
- ペーストのことは`put`と呼び、`p`がペーストコマンドになるそうです💦
- 範囲選択してコピーは`y`
- 指定の場所にカーソルを合わせて`p`
- `vim`での`Yank&Put（コピー＆ペースト）`はこのように行うようです。
- コピペ=`c` `v`で育ってきた私には正直キツイかも、、、






## 参考サイト

https://blog.proglus.jp/4194/

https://qiita.com/Broccolingual/items/8facc5f36564b987807f

https://original-game.com/windows-vim/

https://original-game.com/vim-mac9/

https://bacchi.me/linux/check-current-status/

https://ylabdesk.com/vim-copy-paste




## Qiita投稿に使用した`html`タグ
```
<img src="" alt="" width=50%>
```