×

多階層の要素を一括削除したい【VSCode - Vim】

目次 [隠す]

記事画像
記事画像

対象のコード

例えばこんなHTMLコードがあった場合、大外のdivを含む全コードを少ない手数で削除したい。

<!DOCTYPE html>
<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 の場合に 対応するタグ (

記事画像

が、肝心な「まるっと削除」が未解決。

結論 vim-sorroundで解決

VSCodeVimには、surround.vimのエミュレータが含まれているとのこと。

Vim風VS Codeカスタマイズ詳細 - kick the base

前回、Houdini: VEXをカスタマイズしたVS Codeで書くという記事でVS CodeのVimキーバインド設定について書きましたが、Vimキーバインドを提供してくれるvscodevimというプ

記事画像

動作しない場合、settings.jsonで有効化する。

{
  "vim.surround": true,
}

結果、動画の通り以下の手順で実行

  1. 削除対象の開始または終了タグに移動(Normalモードのまま)
  2. 「d, a, t」で削除対象を選択、削除

あれこれ考えてしまっていたけれど、無事解決。

記事画像

Comments

0 件のコメント :