はじめに
この記事は、All About Group（株式会社オールアバウト） Advent Calendar 2022 2日目の記事です。
おはようございます、@nsadam5070です。
巷ではワールドカップで賑わっていて、特に今日は早朝の試合観戦により寝不足の方も多いかもしれませんが、今回はタイトルの通り「vim(vscodevim)」を使っていて便利なコマンド・細かいけど知ってると作業スピードが上がるなと感じたコマンドをご紹介します。
vscodevimとは
以下の拡張機能をinstallすることで、vscodeでvimのように操作ができます。
便利コマンド紹介
カーソル移動
| コマンド | 内容 |
|---|---|
| gg | ファイルの先頭に移動 |
| G | ファイルの末尾に移動 |
| 10gg | ファイル内の10行目へ移動 |
| % | 対応するカッコへ移動 |
ggを使えばファイル内の任意の行にジャンプできます。
また、細かいですが対応するカッコがわからないときに「%」で移動できます。これも知っておくと便利です。
コピー＆ペースト
| コマンド | 内容 |
|---|---|
| yyp | 行をコピー→1行下に行追加して貼り付け |
| yyP | 行をコピー→1行上に行追加して貼り付け |
| yy5p | 行をコピー→コピーした行を5行分下に貼り付け |
| yiw | カーソル上の単語をコピー |
| yit | HTMLタグの中身をコピー |
| yat | HTMLタグとその中身をコピー |
| yi+任意の記号 | 任意の記号で囲まれている中身だけをコピー |
| ya+任意の記号 | 任意の記号とその中身をコピー |
コードを読んでいるときに、メソッド名で文字列検索することがよくあると思いますが、そんなときにy→i→wでササッとコピーできるのが便利です。
※デフォルトではyでヤンク(コピー)しても、OS側のクリップボードに内容が送られないため、以下設定をすることでクリップボードを共有できます。
"vim.useSystemClipboard": true
削除
| コマンド | 内容 |
|---|---|
| diw | カーソル上の単語を削除 |
| dit | HTMLタグの中身を削除 |
| dat | HTMLタグとその中身を削除 |
| :10d | 10行目を削除 |
HTMLタグごと削除したいときや任意の行を削除するとき、範囲選択することなくコマンド一発で削除できるのでかなり便利です。
削除→インサートモード
| コマンド | 内容 |
|---|---|
| C | カーソル位置から行末まで削除して挿入モード |
| cc | 行を削除→挿入モード |
| ciw | カーソル上の単語を削除して挿入モード |
| cit | HTMLタグの中身を削除して挿入モード |
| ci+任意の記号 | カーソル上の行の任意の記号内の文字列を削除 |
| cf+任意の文字 | カーソルから行末側の任意の文字まで削除 |
| cF+任意の文字 | カーソルから行頭側の任意の文字まで削除 |
この中でも特によく使うのが「ci~」のコマンドです。
メソッドの引数を変更したりHTMLの要素や属性値を変更したりするときなど、カーソルを対象の行に移動だけして、その後コマンド一発で削除〜入力ができるため作業がとっても楽になります。
文字変換
| コマンド | 内容 |
|---|---|
| r+任意の1文字 | カーソル行上の文字を任意の文字に変換 |
タイポがあってもすぐ直せます。こちらも知っておくと地味に便利です。
数字変換
| コマンド | 内容 |
|---|---|
| ctrl+a | カーソル行上の最初に出現する数値をインクリメント(+1) |
| ctrl+x | カーソル行上の最初に出現する数値をデクリメント(-1) |
cssの数値を微修正するときなどに活躍します。
インデント
| コマンド | 内容 |
|---|---|
| ggvG= | ファイル全体のインデントを修正 |
ファイル全体のインデントを一括で修正してくれます。非常に楽でオススメのコマンドです。
ウインドウ分割＆移動
| コマンド | 内容 |
|---|---|
| :sp | ウインドウを上下に分割 |
| :vs | ウインドウを左右に分割 |
| ctrl+w→(h,j,k,l) | 左,下,上,右のウインドウに移動 |
| (ctrl+w)×2 | 次のウインドウに移動 |
| gt | 次のタブに移動 |
| gT | 前のタブに移動 |
ホームポジションを崩さず、ウインドウの分割ができるためこちらもオススメのコマンドです。
また「ctrl+w+h,j,k,l」でウインドウ移動できるため、直感的に操作できます。
画面上の任意の場所にジャンプ
これを実現するためには、easy-motionの設定をします。
{
"vim.easymotion": true,
"vim.easymotionKeys": "sdfghjkl",
"vim.normalModeKeyBindingsNonRecursive": [
{
"before": ["f"],
"after": ["leader", "leader", "s"]
}
],
}
上記設定をしてしまえば、あとは「f + 任意の1文字」を入力することで画面上の任意のコードにジャンプすることができます。
例えば以下コードの「hello」に移動したいとします。
先ほど設定で「f」を入力するとeasy-motionが起動するようにしているので、「f」を入力して「hello」の「h」を押すと画面が以下のように変わります。
この状態で画面に出ている「f」を入力することで一気にその場所にジャンプすることができます。
このように画面に表示されている好きなところにコマンド一発で移動ができるとても便利なコマンドです！
文字列置換
| コマンド | 内容 |
|---|---|
| :%s/before/after/g | ファイル内のbeforeをafterに一括置換 |
| :%s/before/after/gc | ファイル内のbeforeをafterにひとつずつ確認して置換 |
| :5,25s/before/after/gc | ファイル内の5~25行目のbeforeをafterにひとつずつ確認して置換 |
「:%s/class/id/gc」と打ってenterを押すと画面が以下のようになります。
ここで①の中に「y/n/a/q/l」と表示されており、②では「class」にフォーカスがあたっていることがわかります。
それぞれ入力すると以下の挙動になります。
| コマンド | 内容 |
|---|---|
| y | フォーカスがあたっているclassをidに置換 |
| n | フォーカスがあたっているclassを置換せずにスキップする |
| a | フォーカスがあたっているclassを一括してidに置換 |
| q | 何もせず機能を終了する |
| l | フォーカスがあたっている1番目のclassだけをidに置換する |
この状態で「y」を入力してみます
すると1番目の「class」が「id」に置換されており、2番目の「class」にフォーカスがあたっていることがわかります。
続いて「a」を入力すると
フォーカスがあたっていた箇所以降の「class」がすべて「id」に置換されており、上部の「y/n/a/q/l」の表示が消えて機能が終了しています。
このようにファイル内のメソッド名を一括で修正したいときに使えたり、他にもvscodeでメモや議事録を取っていて、任意の単語をまとめて修正したいときなどにも役に立ちます。
終わりに
以上、vimの便利コマンド紹介でした。
この記事を読んで少しでも「vimって便利なんだな〜」と感じてもらえたり、vimを触るきっかけになったり、便利コマンドを知ることでコードを書くのがより楽しくなったりするきっかけになると嬉しいです。
これからもvim修行を続けて、思考のスピードでコード書けることを目指します！
あとそのうちウインドウマネージャーなんかも使って作業効率を上げていきたいと考えています。
最後まで読んで頂き、ありがとうございました！