今日のアウトプットは？
今日は
【もりけん塾】vim勉強会〜vimって何？基本操作を覚える
をアウトプットします！
こんにちは。プログラミングでweb制作ができるようになりたいharuです。
2歳0歳の育児をしながら、22時〜2時に独学しています！
わかったことや、気付きをログに残します。
同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。
もりけん塾のvim勉強会で得たこと
土曜日に、わたしの所属しているもりけん塾で「vim」の勉強会がありました。
もともと、塾生の大先輩ちひろさん(@chihiro7029)がvimについて過去にツイートされていて、気になっていました。(web制作会社にお勤め中なので、勝手に背中を追ってるのです！)
vim初心者にわかりやすく丁寧に教えてくださったもりけんさん(@terrace_tec)に感謝です。
せっかく教えていただいたので、自分ものにするべくまとめたいと思います。
vimって何？
調べたところ、マウスを使わずにコマンドで操作するエディタのこと。
操作を覚えるまでが大変ですが、慣れれば大幅な効率アップが目指せます。
VSCodeでも、vimのコマンドを使用することができる拡張機能があります。
「vim」というやつです。これを入れるだけで、vimのコマンドが使えて便利です。
ということで、今回はVSCodeでvim使っていきます。
vimの基本操作
まずは、基本操作です。vimはキーボードを使って、普段おこなっている操作をしていきます。
ファイル内で“モード“を3つ使い分ける
∟ノーマルモード(移動するとき使う)：escキー
∟インサイトモード(入力するとき使う)：i
∟（ウィジュアルモード：shift + V）←ここはまた今度教えていただく
ノーマルモードでカーソル移動
∟ (→) H (↓) J (↑) K (←) L
∟大きく上に移動：Ctrl + U
∟大きく下に移動：Ctrl + D・その他のコマンド
∟消す：D
∟元に戻す：U
∟行の最初に移動 + インサートモード：Shift + i
∟行の最後に移動 + インサートモード：Shift + a
よく使う操作
次に、説明してきた基本を応用して、よく使う操作です。
文字を検索→選択する
たとえば<div>を選択したい
①/div + Enter
②N：ひとつ下の<div>に移動
Shift + N：ひとつ上の<div>に移動
同じ文字を一括で編集したい
たとえば複数の<div>を<a>にしたい
①ノーマルモードでどこかの<div>の行にカーソルを移動
②Command + Dで<div>を選択
③さらにCommand + Dで次の<div>を選択
④…編集したい<div>を全て選択
⑤D で選択した<div>が一括で消える
⑥インサートモードで“a”を入力→一括で編集できる
⑦元に戻したいときは、U
タグに囲まれた文字をサクッと編集したい
たとえば<p>文字</p>の文字部分を編集
①H,J K ,Lを使って編集したい文字に移動
②ノーマルモードでdiwiと入力すると 、文字を削除→入力モードに切り替わる
③編集したい文字を入力
選択した複数の行を削除
①Shift + Vで削除する１行を選択
②JJJで下に移動すると複数行を選択できる
③Dで削除
VSCodeでファイル内検索をする
最後に、vimではないですが、VSCodeでファイル内検索をする方法を教えていただいたのでメモです。
その後、ファイル内検索もプロジェクト内検索もしましたが、めちゃめちゃ便利です。
今まで「.classはどこだ」…って１から探してました…；
・ファイル内検索
Command + F
プロジェクト内検索
Shift + command + F
ファイル内検索→文字の置き換え
①Shift + Command + H
②2つのフォームが出る
∟上：検索したい文字
∟下：置き換えたい文字
→そのまま置き換えるか、フォームの下に出ているファイル一覧からファイルを指定すれば、指定のファイル内のみで置き換えができる
ファイル検索
Command + P
あとがき
教えていただいただけではなく、ちゃんと使えるようになります..！
チートシートとして、自分でまとめたものと、もりけんさんの用意してくれたものを印刷しました。
https://twitter.com/fuwafuwahappy/status/1284679225463595008?s=20
twitter.com
これみて、模写がんばります。
Thanks：師匠「もりけんさん」(@terrace_tec)
もりけんさんのHPはこちら
