Как быстро закрыть HTML-теги в Vim?

Прошло много времени с тех пор, как мне приходилось делать какой-либо HTML-подобный код в Vim, но недавно я снова столкнулся с этим. Скажем, я пишу простые HTML:

<html><head><title>This is a title</title></head></html>

Как мне быстро записать закрывающие теги для заголовка, заголовка и html? Я чувствую, что мне здесь не хватает действительно простого способа, который не предполагает, что я переписываю их все один за другим.

Конечно, я могу использовать Ctrl P для автозаполнения имен отдельных тегов, но на клавиатуре моего ноутбука меня привлекают правильные скобки и косая черта.


xml html autocomplete vim
person wds    schedule 25.09.2008    source источник
comment
Замечательный вопрос с замечательной кучей ответов! Многие ответы получили высокие оценки и содержат решения, которые кажутся действительно хорошими, но в то же время совершенно разными. Хорошая возможность узнать больше о Vim и его экосистеме :-)   -  person IllvilJa    schedule 05.07.2021

Ответы (11)


arrow_upward
38
arrow_downward

Проверь это..

closetag.vim

Functions and mappings to close open HTML/XML tags

https://www.vim.org/scripts/script.php?script_id=13

Я использую нечто подобное.

person Ian P    schedule 25.09.2008
comment
Я это установил. Он не завершает закрытие тега автоматически. Что такое комбинация клавиш? Я пробую Ctrl-_, но это делает мой терминал мелким шрифтом. - person alhelal; 03.04.2018

arrow_upward
76
arrow_downward

Я считаю использование подключаемого модуля xmledit довольно полезным. он добавляет две части функциональности:

  1. Когда вы открываете тег (например type <p>), он расширяет тег, как только вы вводите закрывающий > в <p></p>, и помещает курсор внутри тега в режиме вставки.

  2. Если затем вы сразу же наберете другой > (например, вы наберете <p>>), он заменяется на

    <p>

    </p>

и помещает курсор внутри тега с однократным отступом в режиме вставки.

Плагин xml vim добавляет к этим функциям сворачивание кода и сопоставление вложенных тегов.

Конечно, вам вообще не нужно беспокоиться о закрывающих тегах, если вы пишете свой HTML-контент в Markdown и используйте %! для фильтрации вашего буфера Vim через процессор Markdown по вашему выбору :)

person hakamadare    schedule 25.09.2008
comment
Может ли этот плагин автоматически закрывать теги при вводе '‹/'? Или просто вставить закрывающий тег нажатием клавиши? Иногда вы удаляете закрывающий тег и хотите, чтобы он был вставлен позже ... - person bzx; 25.06.2011
comment
Я удалил его, потому что мой gvim мигал при запуске - person Tyler Long; 14.09.2011
comment
Мне не нравится этот плагин, потому что он не обеспечивает простой способ вывести курсор за сгенерированный тег. Например, если вы хотите написать «Добрый день ‹b› ‹/b›, вы начинаете с ввода« Приятного ‹b›, что переводится как «Приятного ‹b› | ‹/b›. Затем вам нужно либо навести стрелку вправо, либо выйти из режима вставки, чтобы продолжить остальную часть предложения. Вот почему решение, в котором вы нажимаете клавишу, чтобы вставить конечный тег, лучше. - person exclipy; 09.10.2011
comment
@exclipy В Vim есть множество встроенных способов сделать это. Для начала попробуйте команды «E», «f» и «A». - person user456584; 15.11.2013
comment
Я установил плагин xmledit с git clone https://github.com/sukima/xmledit.git ~/.vim/bundle/xmledit. Но работает только при редактировании файлов .xml. Когда файл ext имеет формат .html или .htm, он не работает. - person Leo; 27.11.2014
comment
@Chad в настоящее время моим решением было скопировать и вставить файл в тот же каталог, точно переименовать его в html.vim, чтобы он также влиял на файлы HTML. Теперь у меня есть два одинаковых файла в ~ / .vim / ftplugin (xml.vim и html.vim). - person SilentDev; 11.06.2015

arrow_upward
57
arrow_downward

Я люблю минимализм,

imap ,/ </<C-X><C-O>
person sjh    schedule 10.02.2009
comment
Что делает ‹C-X› ‹C-O›? Для меня это ничего не значит. - person exclipy; 09.10.2011
comment
Бывают случаи, когда нужно написать /, поэтому я бы предпочел использовать другой ярлык. Еще одна деталь - омни-завершение нужно закрывать, не дожидаясь дополнительного ввода. Таким образом, 1_ - person ; 12.12.2012
comment
Очень круто. Также добавлен <Esc>F<i в конец этого слова, чтобы вернуть курсор внутрь тега. - person mVChr; 04.05.2017
comment
чтобы использовать эту команду, перейдите в режим вставки, затем нажмите ,/, чтобы закрыть тег - person thedanotto; 07.08.2017
comment
Вышеупомянутое решение имеет много положительных отзывов, но ему не хватает объяснений, особенно для новичка, такого как я. Как это работает и как им пользоваться? - person Phemelo Khetho; 04.05.2020
comment
Захожу через 10 лет, чтобы получить это сам, так как в какой-то момент он выпал из моего vimrc, он использует omni comption (vim.fandom.com/wiki/Omni_completion), чтобы закрыть текущий тег в файлах режима html, я думаю, что сопоставил его с ./, потому что он быстро набирался и обычно сопровождался открытием новой строки, но я ' сейчас положу это в другое место - person sjh; 01.06.2020

arrow_upward
53
arrow_downward

Мне удобнее заставить vim писать за меня открывающий и закрывающий теги, а не только закрывающий. Вы можете использовать отличный плагин ragtag Тима Поупа. Использование выглядит следующим образом (позвольте | отметить позицию курсора), которое вы вводите:

span|

нажмите CTRL + x SPACE

и вы получите

<span>|</span>

Вы также можете использовать CTRL + x ENTER вместо CTRL + x ПРОБЕЛ, и вы получите

<span>
|
</span>

Ragtag может больше, чем просто это (например, вставить ‹% = stuff вокруг этого%› или DOCTYPE). Вы, вероятно, захотите проверить другие плагины от автора ragtag, особенно окружать.

person Krzysiek Goj    schedule 27.09.2008
comment
+1 Отлично! Кстати, теперь это известно как ragtag: vim.org/scripts/script.php ? script_id = 1896 - person neezer; 25.06.2011
comment
Этот, безусловно, самый простой. У Textmate все было хорошо, но Vim справляется с этим, спасибо Krzysiek. - person josemota; 31.10.2011

arrow_upward
23
arrow_downward

Если вы делаете что-то сложное, очень хорошо подойдет Sparkup.

Пример с их сайта:

ul > li.item-$*3 заменяется на:

<ul>
    <li class="item-1"></li>
    <li class="item-2"></li>
    <li class="item-3"></li>
</ul>

с <C-e>.

Чтобы выполнить пример, указанный в вопросе,

html > head > title{This is a title}

дает

<html>
  <head>
    <title>This is a title</title>
  </head>
</html>
person thanthese    schedule 14.12.2010
comment
Огромное спасибо! Это круче, чем все, что я видел раньше, не только Vim, но и среди любых других редакторов! Супер! - person Chris; 06.09.2011
comment
Это отличный плагин - person DenniJensen; 10.02.2017
comment
Этот плагин произошел от дзен-кодирования. Последний теперь известен как emmet и имеет немного больший набор функций. - person chb; 16.08.2018

arrow_upward
19
arrow_downward

Также существует плагин zencoding vim: https://github.com/mattn/zencoding-vim

руководство: https://github.com/mattn/zencoding-vim/blob/master/TUTORIAL

Обновление: теперь это называется Эммет: http://emmet.io/

Отрывок из учебника:

1. Expand Abbreviation

  Type abbreviation as 'div>p#foo$*3>a' and type '<c-y>,'.
  ---------------------
  <div>
      <p id="foo1">
          <a href=""></a>
      </p>
      <p id="foo2">
          <a href=""></a>
      </p>
      <p id="foo3">
          <a href=""></a>
      </p>
  </div>
  ---------------------

2. Wrap with Abbreviation

  Write as below.
  ---------------------
  test1
  test2
  test3
  ---------------------
  Then do visual select(line wize) and type '<c-y>,'.
  If you request 'Tag:', then type 'ul>li*'.
  ---------------------
  <ul>
      <li>test1</li>
      <li>test2</li>
      <li>test3</li>
  </ul>
  ---------------------

...

12. Make anchor from URL

  Move cursor to URL
  ---------------------
  http://www.google.com/
  ---------------------
  Type '<c-y>a'
  ---------------------
  <a href="http://www.google.com/">Google</a>
  ---------------------
person Preet Kukreti    schedule 08.12.2011
comment
эй, это создатель рубина? - person tjklemz; 12.07.2013

arrow_upward
14
arrow_downward

Картография

Мне нравится, когда мои блочные теги (в отличие от встроенных) закрываются немедленно и с помощью как можно более простого ярлыка (я предпочитаю избегать использования специальных клавиш, таких как CTRL, где это возможно, хотя я использую closetag.vim, чтобы закрыть свои встроенные теги.) Мне нравится использовать этот ярлык при запуске блоков тегов (спасибо @kimilhee; это взлет его ответа):

inoremap ><Tab> ><Esc>F<lyt>o</<C-r>"><Esc>O<Space>

Пример использования

Тип-

<p>[Tab]

Результат-

<p>
 |
</p>

где | указывает положение курсора.

Объяснение

  • inoremap означает создание сопоставления в режиме вставки
  • ><Tab> означает закрывающие угловые скобки и символ табуляции; это то, что совпадает
  • ><Esc> означает завершение первого тега и выход из режима вставки в нормальный режим
  • F< означает найти последнюю открывающую угловую скобку
  • l означает перемещение курсора вправо (не копировать открывающую угловую скобку)
  • yt> означает перемещение с позиции курсора вверх до следующей закрывающей угловой скобки (т. Е. Копирование содержимого тегов)
  • o</ означает начать новую строку в режиме вставки и добавить открывающую угловую скобку и косую черту
  • <C-r>" означает вставить в режиме вставки из регистра по умолчанию (")
  • ><Esc> означает закрыть закрывающий тег и выйти из режима вставки
  • O<Space> означает начать новую строку в режиме вставки над курсором и вставить пробел
person Keith Pinson    schedule 12.08.2012
comment
@wds Вау, да, я никогда не задумывался о том, что l означает право, а не лево, ха-ха ... какая забавная ошибка. Что вы думаете о моем посте? Я заметил, что вы не проголосовали. - person Keith Pinson; 24.08.2012
comment
Конечно, приятно. Недавно я начал использовать плагин xml.vim (он действительно неплохо работает). Я бы предложил добавить его в ваш .vimrc с помощью автокоманды для конкретного типа файла, то есть: au filetype html inoremap <buffer> ... - person wds; 24.08.2012
comment
Наконец, команда Autoclose, которая работает именно так, как должна - просто! - person cnp; 15.01.2015
comment
Мне нравится держать курсор между тегами. Поэтому я изменил его в соответствии со своими потребностями. inoremap ><Tab> ><Esc>F<lyt>o</<C-r>"><Esc>kJxi Удаляю 0<Space> и добавляю kJxi. Перейдите на 1 шаг вверх, соедините две строки, удалите один символ и перейдите в режим вставки. - person Samundra; 19.06.2020

arrow_upward
10
arrow_downward

Ознакомьтесь с vim-closetag

Это действительно простой скрипт (также доступный как vundle плагин), закрывающий (X) HTML-теги за вас. Из этого README:

Если это текущий контент:

<table|

Теперь вы нажимаете >, содержимое будет таким:

<table>|</table>

А теперь, если вы снова нажмете >, содержимое будет таким:

<table>
   |
</table>

Примечание. | - здесь курсор

person Sheharyar    schedule 24.02.2017

arrow_upward
6
arrow_downward

allml (теперь Ragtag) и Омни-завершение (‹C-X› ‹C-O›) не работают с такими файлами, как .py или .java.

если вы хотите автоматически закрыть тег в этом файле, вы можете сопоставить его следующим образом.

imap <C-j> <ESC>F<lyt>$a</^R">

(^ R - это Contrl + R: вы можете ввести, например, Control + v, а затем Control + r)

(| - позиция курсора) теперь, если вы наберете ..

‹P› abcde |

и введите ^ j

затем закройте тег вот так ..

‹P› abcde ‹/p› |

person kimilhee    schedule 29.05.2010
comment
с imap ‹C-j› ‹ESC› mfF ‹lyt› `fa‹ / ‹C-R› ›тег клонирования находится там, где был курсор, когда вы набирали ^ j вместо конца строки ($) - person Pietro; 07.08.2014

arrow_upward
6
arrow_downward

Вот еще одно простое решение, основанное на легко доступном веб-письме:

  1. Автоматическое закрытие тега HTML

    :iabbrev </ </<C-X><C-O>

  2. Включение завершения

    autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags

person mloskot    schedule 26.10.2012
comment
Шикарный ответ !!! без плагина !!! (2-й элемент имеет linkrot) по-прежнему, возможно, лучший ответ из всех, потому что кажется, что быстрее изменить .vimrc, чем обрабатывать плагины. Плюс самый минималистичный ответ - person nilon; 12.07.2017
comment
Это добавляет пробел после закрытого тега :( - person Vitaly Zdanevich; 24.04.2018

arrow_upward
4
arrow_downward

Основываясь на отличном ответе @KeithPinson (извините, недостаточно очков репутации, чтобы прокомментировать ваш ответ), эта альтернатива предотвратит копирование при автозаполнении чего-либо дополнительного, что может быть внутри тега html (например, классы, идентификаторы и т. Д.) .), но не следует копировать в закрывающий тег.

ОБНОВЛЕНИЕ. Я обновил свой ответ для работы с filename.html.erb файлами.
Я заметил, что мой исходный ответ не работал с файлами, обычно используемыми в представлениях Rails, например some_file.html.erb, когда я использовал встроенный рубин (например, <p>Year: <%= @year %><p> ). Приведенный ниже код будет работать с .html.erb файлами.

inoremap ><Tab> ><Esc>?<[a-z]<CR>lyiwo</<C-r>"><Esc>O

Пример использования

Тип:

<div class="foo">[Tab]

Результат:

<div class="foo">
  |
<div>

где | указывает положение курсора

И как пример добавления закрывающего тега в строку вместо стиля блока:

inoremap ><Tab> ><Esc>?<[a-z]<CR>lyiwh/[^%]><CR>la</<C-r>"><Esc>F<i

Пример использования

Тип:

<div class="foo">[Tab]

Результат:

<div class="foo">|<div>

где | указывает положение курсора

Верно, что оба приведенных выше примера полагаются на >[Tab], чтобы сигнализировать о закрывающем теге (это означает, что вам нужно будет выбрать либо встроенный или блочный стиль). Лично я использую блочный стиль с >[Tab] и встроенный стиль с >>.

person Nick Erhardt    schedule 18.08.2016