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

100

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

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

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

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

Теги:
vim
autocomplete

11 ответов

34
Лучший ответ

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

closetag.vim

Functions and mappings to close open HTML/XML tags

http://vim.sourceforge.net/scripts/script.php?script_id=13

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

Поделиться
  • 0
    Я установил это. Он не завершает закрывать тег автоматически. Что такое ярлык? Я пытаюсь Ctrl-_ , но это делает маленький шрифт моего терминала.
67

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

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

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

    <p>

    </p>

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

xml vim plugin добавляет сворачивание кода и вложенные теги, соответствующие этим функциям.

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

Поделиться
  • 0
    Может ли этот плагин автоматически закрывать теги при наборе '</'? Или просто вставить закрывающий тег нажатием клавиши? Иногда вы удаляете закрывающий тег и хотите вставить его потом ...
  • 0
    Я удалил его, потому что это заставило мой gvim мигать при запуске
Показать ещё 5 комментариев
50

Мне нравятся минимальные вещи,

imap ,/ </<C-X><C-O>
Поделиться
  • 3
    Что делает <CX> <CO>? Это ничего не делает для меня.
  • 1
    исключение: онмический
Показать ещё 3 комментария
38

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

span|

нажмите CTRL + x SPACE

и вы получите

<span>|</span>

Вы также можете использовать CTRL + x ENTER вместо CTRL + x SPACE, и вы получите

<span>
|
</span>

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

Поделиться
  • 0
    +1 Круто! Кстати, это теперь известно как ragtag : vim.org/scripts/script.php?script_id=1896
  • 0
    обновлено: allml -> ragtag
Показать ещё 2 комментария
23

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

Пример со своего сайта:

ul > li.item-$*3 расширяется до:

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

с a <C-e>.

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

html > head > title{This is a title}

дает

<html>
  <head>
    <title>This is a title</title>
  </head>
</html>
Поделиться
  • 0
    Большое спасибо! Это круче всего, что я видел раньше, не только Vim, но и среди других редакторов! Супер!
  • 0
    Это отличный плагин
Показать ещё 1 комментарий
15

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

учебник: https://github.com/mattn/zencoding-vim/blob/master/TUTORIAL

Обновление: теперь называется Emmet: 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>
  ---------------------
Поделиться
  • 0
    Вау, это создатель ruby?
  • 0
    @tjklemz, нет.
Показать ещё 2 комментария
7

Mapping

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

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

Использование образца

Тип -

<p>[Tab]

Результат -

<p>
 |
</p>

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

Описание

  • inoremap означает создание отображения в режиме вставки
  • ><Tab> означает скобки закрывающего угла и символ табуляции; это то, что соответствует
  • ><Esc> означает завершение первого тега и выход из вставки в обычный режим
  • F< означает найти последнюю скобу угла открытия
  • l означает перемещение курсора вправо один (не копируйте скобу угла открытия)
  • yt> означает yank из позиции курсора вверх до следующей скобки угла закрытия (т.е. содержимого тегов)
  • o</ означает запуск новой строки в режиме вставки и добавление скобки угла открытия и слэш
  • <C-r>" означает вставку в режиме вставки из регистра по умолчанию (")
  • ><Esc> означает закрытие закрывающего тега и выход из режима вставки
  • O<Space> означает запуск новой строки в режиме вставки над курсором и вставка пробела
Поделиться
  • 0
    @wds Ого, да, я никогда не думал о том , что l означает «право» , а не «слева» , ха - ха ... какая смешная ошибка. Что вы думаете о моем посте? Я заметил, что ты не голосовал.
  • 0
    Приятно точно. Я недавно использовал плагин xml.vim (он работает довольно хорошо). Я бы предложил добавить его в ваш .vimrc с помощью au filetype html inoremap <buffer> ... , то есть: au filetype html inoremap <buffer> ...
Показать ещё 1 комментарий
6

allml (теперь Ragtag) и Omni-завершение (< C-X > < C-O > ) не работает в файле типа .py или .java.

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

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

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

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

< р > ABCDE |

и введите ^ j

то он закрывает тег, как это.

< р > ABCDE </р > |

Поделиться
  • 0
    Ragtag отличный, также работает для .erb тегов
  • 0
    с imap <Cj> <ESC> mfF <lyt> `fa </ <CR>"> тег клонирования находится там, где был курсор, когда вы вводили ^ j вместо конца строки ($)
3

Построение отличного ответа от @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>

где | указывает позицию курсора

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

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

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

Тип:

<div class="foo">[Tab]

Результат:

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

где | указывает позицию курсора

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

Поделиться
3

Вот еще одно простое решение, основанное на легко находке в Интернете:

Поделиться
  • 1
    Потрясающий ответ !!! без плагина !!! (2-й пункт имеет linkrot), возможно, лучший ответ из всех, потому что кажется, что он быстрее модифицирует .vimrc, чем обрабатывает плагины. Плюс самый минималистский ответ
  • 0
    Это добавляет пробел после закрытого тега :(
2

Отъезд vim-closetag

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

Если это текущее содержимое:

<table|

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

<table>|</table>

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

<table>
   |
</table>

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню