多階層の要素を一括削除したい【VSCode - Vim】
初稿:
更新:
- 2 min read -
対象のコード
たとえばこんなHTMLコードがあった場合、大外のdivを含む全コードを少ない手数で削除したい。
<div>
<div>
<p>この3層を削除したいよ！</p>
</div>
</div>Vimの場合
matchit.vimをONにしていれば、Visualモードで開始タグを行選択し、終了タグまで「%」でジャンプすることで削除に至ることができる。
という手順を使用していたけれど、vim-sorroundを使用すればもっと簡単だった。（後述）
VSCodeVimの場合
こちらのブログで、タグ間を移動するにはemmetのactionをキーに割り当てる方法が紹介されている。
[VSCode]htmlファイル編集中のみタグ移動ショートカットキーを有効にする(主にVSCodeVimユーザ向け) - dackdive's blog
メモ。 Vim には対応する括弧にカーソルを移動する % キーがあるが、 matchit.vim というプラグインを使うと、html の場合に < から > までではなく 対応するタグ ( <body> ~ </body> ) にジャンプできる。 VSCode にも Vim エクステンション を入れて使っているが、これと同じ操作ができないか調べてみた。 まさにこれでした。 どうやら、 editor.emmet.action.matchTag というコマンドが標準でサポートされており、これにショートカットキーを割り当てればよさそう。 editor.emmet.action.matchTag ただ…
が、肝心な「まるっと削除」が未解決。
結論 vim-sorroundで解決
VSCodeVimには、surround.vimのエミュレータが含まれているとのこと。
Vim風VS Codeカスタマイズ詳細 - kick the base
前回、Houdini: VEXをカスタマイズしたVS Codeで書くという記事でVS CodeのVimキーバインド設定について書きましたが、Vimキーバインドを提供してくれるvscodevimというプラグインが想像以上に良かったのでもう少し細かく見ていきたいと思います。 もちろん本家Vimにはカスタマイズ性能でかないませんが、プラグイン一個入れるだけでこれだけできるのはちょっとびっくりだったので備忘も兼ねて記しておきます。これ以上はあんまりいじらないんじゃないかな、と思ってます。
動作しない場合、settings.jsonで有効化する。
{
"vim.surround": true
}結果、動画の通り以下の手順で実行
- 削除対象の開始または終了タグに移動（Normalモードのまま）
- 「d, a, t」で削除対象を選択、削除
あれこれ考えてしまっていたけれど、無事解決。