×

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

2020/10/05

目次 [隠す]

対象のコード

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

html<!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で有効化する。

json{
  "vim.surround": true,
}

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

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

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

記事画像

VSCode・VisualStudio関連の記事

VSCodeの背景画像を設定してテンションを上げる(拡張機能を使用) | neputa note

本記事の目的 VSCodeのエディタ背景に好きな背景画像があるとテンションが上がるからそうしよう。 ※VSCodeサポート対象外の拡張機能を使用します。試す際は自己責任に於いて行ってください。

blog card

「Ubuntu 20.04LTS(日本語Remix)」にアプリをインストールする(LibreOffice、VSCode、Joplinなど) | neputa note

先日、購入した中古のノートPCに「Ubuntu 20.04LTS(日本語Remix版)」をインストールした。続けてOS周りの設定作業を行った。今回は必要なアプリケーションをインストールした作業の備忘録

blog card

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

コメント