×

多階層の要素を一括削除したい【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」で削除対象を選択、削除

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

記事画像

VSCode・VisualStudio関連の記事

VSCodeでもStyleCopを使いたい【C#】 | neputa note

VisualStudioでC#を記述する際に「StyleCopAnalyzers(以降StyleCop)」というコード解析ツールを使用しています。チーム開発ではもちろん、個人開発においても整ったコーデ

blog card

editorconfig for VSCode でコーディングルールを 統一する【C#】 | neputa note

前回記事のStyleCopは、C#や.NETのコーディングスタイルを規定するため、警告を表示してくれるツールでした。今回のeditorconfigは、C#や.NETはもちろん、VSCodeのエディタ全

blog card

MoqでExpressionを引数に取るメソッド をセットアップする メモ | neputa note

引数に条件式(Expression)を取るメソッドをMoqにSetupしようとした際に少しハマったのでメモ。C# Moq

blog card

Unit Test が実行できなくなった 原因と対処 【 VisualStudio 2019 / xUnit 】 | neputa note

xUnitを使っています。Visual Studio 2019 で突然 UnitTest が実行できない状況に。原因と対処を備忘録としてノートする。Visual Studio 2019.NET

blog card

Comments

0 件のコメント :