100
74

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

vim-surroundでvimmerへの道を極めよう

Last updated at Posted at 2019-08-15

#はじめに

先日、エディタを VS Code に変更しました。Vim風にコーディングしようとvscodevimプラグインを導入し、vim-surroundを有効化し、編集作業がより一層、楽になりました。操作方法を本記事にまとめておきたいと思います。

ちなみに、ターミナル上でVimを起動する場合も同様のプラグインを入れれば本記事のコマンドは使えるようになります、ただし、プラグインのインストール方法は本記事では紹介しておりません。

#vim-surround とは
丸括弧や角括弧などのさまざまな、囲い(surround)を編集する際に役立つプラグイン。
括弧の種類を変えたり、指定した範囲を括弧で囲ったり、括弧の中の文字列を編集したり、と大活躍します。

#vim-sorround 有効化
有効化するための設定ファイルは、下記の位置にあります。
$HOME/Library/Application\ Support/Code/User/settings.json
あらかじめfalseに設定されている場合は、trueに変更します。

settings.json
{
    "vim.surround": true,
}

#vim-surround の使い方
[e]: existing char(既存の文字)
[d]: desired char(目的の文字)
[mo]: motion(動作)

とする。

コマンド 詳細 覚え方
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'コマンドで囲いの'(クォーテーション)を削除
Image from Gyazo
その他、 同じような用例としてds"ds(ds{dstなども可能。
dsttは<div>や、<p>などのHTMLタグ

###1.2 囲いの中を削除
di'コマンドで囲いの'(クォーテーション)を削除
Image from Gyazo
その他、 同じような用例としてdi"di(di{ditなども可能。
dittは<div>や、<p>などのHTMLタグ

また、**diw(delete inner word)は単語を削除するのにかなり重宝します。**カーソルの位置は単語内であればどこでも良い。

##2. 囲いを変更
###2.1 囲いを変更
cs'{コマンドで囲いの'(クォーテーション){に変更
Image from Gyazo
その他、さまざまな括弧の組み合わせで使用可能。
一つ例をあげると、cs'<p>でクォーテーションをタグに変更できる。

###2.2 囲いの中を変更
ci'コマンドで囲いの'(クォーテーション)の中の文字列を変更
Image from Gyazo

その他、さまざまな組み合わせで使用可能。
また、**ciw(change inner word)は単語を変更するのにかなり重宝します。**カーソルの位置は単語内であればどこでも良い。

##3. 文字列を囲う⑴
ysiw'コマンドで単語を囲む。ここでmotionはiw
you sorround inner word 'の略だとか。
Image from Gyazo
その他、
ys$で、行末までクォーテーションで囲む、
ysiw)で、単語を括弧で囲む、
ysiw(で、単語と括弧の間に空白を入れて囲む、
等がある。

##4. 文字列を囲う⑵ ~ヴィジュアルモード~
viwS"コマンドで、ヴィジュアルモードに入って(v)、単語を選択して(iw)、ダブルクォーテーションで囲む(S")。
Image from Gyazo
要領は、削除、変更などと全く同じ。

#参考

#おわりに
一見、コマンドを覚えるのが大変そうですが、コマンドの組み立ては全て同じですので、dscsysSの4つを使いこなせるようになれば、すぐに他のコマンドにも対応できます。
編集作業がかなり捗りますので、ぜひ試してみてください。

p.s. diciはvim-sorroundを有効にしなくても使えます。

100
74
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
100
74

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?