12

What's the best shortcut or plugin to comment out HTML/XML elements?

And also need to uncomment.

northtree
  • 8,569
  • 11
  • 61
  • 80

4 Answers4

8

You can use a combination of matching XML tags, as can be seen in this question and Perl's search and replace.

For instance, given this snippet:

<TypeDef name="a">
  <ArrayType high="14" low="0">
    <UndefType type="node">
    </UndefType>
  </ArrayType>
</TypeDef>

Put the cursor on either the opening or closing TypeDef and type the following sequence:

vat:s/^\(.*\)$/<!-- \1 -->/
  1. v - puts you into visual mode
  2. at - selects the whole XML tag
  3. :s/^\(.*\)$/<!-- \1 -->/ - surrounds each line with '<!-- ... -->', the comment delimiters for XML

Alternatively, you can just delete it like this:

dat
  1. d - delete according to the following movements
  2. at - as before

To delete id use then use vat:s/-->// to delete comments

marcel
  • 83
  • 1
  • 5
Dzoki
  • 739
  • 4
  • 14
  • In case someone wondered, you'll also need to do vat:s/ – DystD Feb 21 '23 at 17:24
  • Also, do :nohl to clear the highlighting (or remap this :let @/ = "" from https://stackoverflow.com/q/657447/18115206). – DystD Feb 21 '23 at 18:27
  • Another way to uncomment (modified from vi.stackexchange.com/a/17777/31302): vat:norm!05x$4X – DystD Feb 21 '23 at 21:45
6

I use the tComment plugin. You can find a detailed video tutorial here on how to install and use it.

The plugin is very useful as it allows you to toggle comments from both the command and input interface, and you can do so using both visual mode and motions (like gcw, or gc3w)

Moses
  • 9,033
  • 5
  • 44
  • 67
  • Thanks, I tried out tComment and am pretty happy with it. Check out http://net.tutsplus.com/tutorials/other/vim-essential-plugin-tcomment/ on how to get started. – justin Apr 27 '13 at 18:03
2

If you use emmet-vim, you can select the whole contents of the tag you would like to comment out by pressing v a t and then press Ctrl y /

mokagio
  • 16,391
  • 3
  • 51
  • 58
worrawut
  • 958
  • 10
  • 17
0

To comment: vato<ESC>i<!-- <ESC>vatA --><ESC>

  1. Position the cursor anywhere inside the HTML block. Not inside a nested one unless you want to comment that one.
  2. Go to the opening tag: vato
  3. Exit visual mode: Esc
  4. Insert: i<!--
  5. Exit insert mode: Esc
  6. Go to closing tag: vat
  7. Append: A -->
  8. Exit insert mode: Esc

Note: You may use I to insert directly from visual mode, and it'll work with multi-line blocks, but for single line elements it'll mess up the indentation.

To uncomment: vat<ESC>4xvato<Esc>5X

  1. Position the cursor anywhere inside the HTML block, ending comment delimiter excluded.
  2. Go to the closing tag: vat
  3. Exit visual mode: Esc
  4. Delete 4 chars: 4x
  5. Go to the opening tag vato
  6. Delete preceding 5 chars: 5X

Using .vimrc or init.vim to create shorcuts

You may add these lines to your .vimrc (or init.vim in neovim) to remap shortcuts:

" Comment HTML element
nnoremap <silent> <leader>h :set lazyredraw<cr>mhvato<ESC>i<!-- <ESC>vatA --><ESC>`h:set nolazyredraw<cr>

" Uncomment HTML element
nnoremap <silent> <leader>H :set lazyredraw<cr>mhvat<ESC>4xvato<ESC>5X`h:set nolazyredraw<cr>

Warning:

  • You will need to undo if you try to uncomment a non-commented area for it will delete some characters. You could avoid this by replacing 4x with d2f- and 5X with dF!, but then you'd have issues with this kind of workaround and anything else in the same line that contains -...- or !.
  • If there are already comments in between the tags of the element to comment out, you will need to uncomment those first.

Notes:

Tip: Use :source $MYVIMRC to apply changes done to .vimrc (or init.vim) without having to restart vim.

DystD
  • 99
  • 4