はじめに
先日、エディタを VS Code に変更しました。Vim風にコーディングしようとvscodevimプラグインを導入し、vim-surroundを有効化し、編集作業がより一層、楽になりました。操作方法を本記事にまとめておきたいと思います。
ちなみに、ターミナル上でVimを起動する場合も同様のプラグインを入れれば本記事のコマンドは使えるようになります、ただし、プラグインのインストール方法は本記事では紹介しておりません。
vim-surround とは
丸括弧や角括弧などのさまざまな、囲い（surround）を編集する際に役立つプラグイン。
括弧の種類を変えたり、指定した範囲を括弧で囲ったり、括弧の中の文字列を編集したり、と大活躍します。
vim-sorround 有効化
有効化するための設定ファイルは、下記の位置にあります。
$HOME/Library/Application\ Support/Code/User/settings.json
あらかじめfalseに設定されている場合は、trueに変更します。
{
"vim.surround": true,
}
vim-surround の使い方
[e]: existing char(既存の文字)
[d]: desired char（目的の文字）
とする。
| コマンド | 詳細 | 覚え方 |
|---|---|---|
| d s [e] | [e](囲い)を削除 | delete surround |
| c s [e] [d] | [e](囲い)を[d](囲い) に変更 | change surround |
| y s [mo] [d] | mo(モーション)を使って、[d](囲い)で囲む | you surround |
| S [d] | [d](囲い)で囲む（注： ヴィジュアルモードの時のみ） | Sorround(注: Sは大文字) |
motionはiw（inner word）、a'(all ')など。
主に、i(inner)かa(all)の後に、w（word）、'(クォーテーション)などの文字を続ける。
具体的に確認していきます。
1. 削除
1.1 囲いを削除
ds'コマンドで囲いの'(クォーテーション)を削除
その他、 同じような用例としてds"、ds(、ds{、dstなども可能。
dstのtは<div>や、<p>などのHTMLタグ。
1.2 囲いの中を削除
di'コマンドで囲いの'(クォーテーション)の中を削除
その他、 同じような用例としてdi"、di(、di{、ditなども可能。
ditのtは<div>や、<p>などのHTMLタグ。
また、diw(delete inner word)は単語を削除するのにかなり重宝します。カーソルの位置は単語内であればどこでも良い。
2. 囲いを変更
2.1 囲いを変更
cs'{コマンドで囲いの'(クォーテーション)を{に変更
その他、さまざまな括弧の組み合わせで使用可能。
一つ例をあげると、cs'<p>でクォーテーションをタグに変更できる。
2.2 囲いの中を変更
ci'コマンドで囲いの'(クォーテーション)の中の文字列を変更
その他、さまざまな組み合わせで使用可能。
また、ciw(change inner word)は単語を変更するのにかなり重宝します。カーソルの位置は単語内であればどこでも良い。
3. 文字列を囲う⑴
ysiw'コマンドで単語を囲む。ここでmotionはiw。
you sorround inner word 'の略だとか。
その他、
ys$で、行末までクォーテーションで囲む、
ysiw)で、単語を括弧で囲む、
ysiw(で、単語と括弧の間に空白を入れて囲む、
等がある。
4. 文字列を囲う⑵ ~ヴィジュアルモード~
viwS"コマンドで、ヴィジュアルモードに入って(v)、単語を選択して(iw)、ダブルクォーテーションで囲む(S")。
要領は、削除、変更などと全く同じ。
参考
おわりに
一見、コマンドを覚えるのが大変そうですが、コマンドの組み立ては全て同じですので、ds、cs、ys、Sの4つを使いこなせるようになれば、すぐに他のコマンドにも対応できます。
編集作業がかなり捗りますので、ぜひ試してみてください。
p.s. di、ciはvim-sorroundを有効にしなくても使えます。