117

Минув час, коли мені довелося робити будь-який HTML-код Vim, але нещодавно я знову натрапив на це. Скажіть, я пишу кілька простих HTML:

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

Як швидко записати ті завершальні теги для заголовка, голови та HTML? Я відчуваю, що я пропускаю якийсь справді простий спосіб, який не передбачає, що я переписую їх усі за одним.

Звичайно, я можу використовувати CtrlPдля автоматичного заповнення окремих назв тегів, але те, що отримує мене на клавіатурі мого ноутбука, насправді отримує дужки та косу рису правильно.

— wds
джерело

38

Заціни..

closetag.vim

Functions and mappings to close open HTML/XML tags

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

Я використовую щось подібне.

— Ян П
джерело

Я це встановив. Вона не завершується закритим тегом автоматично. Що таке ярлик? Я намагаюся Ctrl-_, але це робить невеликий шрифт мого терміналу.

— alhelal

74

Я вважаю, що використання плагіна xmledit досить корисне. це додає дві функції:

При відкритті тега ( наприклад , типу <p>), він розширює тег , як тільки ви наберете закриття >в <p></p>і поміщає курсор всередині тега в режимі вставки.
Якщо потім відразу ввести інший >( наприклад, ти вводиш <p>>), він розширить це на

<p>

</p>

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

XML ВІМ плагін додає згортання коди і вкладене відповідність тегів до цих функцій.

Звичайно, взагалі не потрібно турбуватися про закриття тегів, якщо ви пишете свій вміст HTML у Markdown та використовуєте %!для фільтрації буфера Vim через обраний вами процесор :)

— хакамадаре
джерело

Чи може цей плагін автоматично закривати теги, коли вводиться "</"? Або просто вставити закриваючий тег якимсь натисканням клавіші? Іноді ви видаляєте закриваючий тег і хочете вставити його згодом ...

— bzx

7

Мені не подобається цей плагін, оскільки він не забезпечує простий спосіб отримати курсор минулого створеного тегу. Наприклад, якщо ви хочете написати "Приємний <b> приємний </b> день", ви почнете, ввівши "Приємно <b> приємно", що відображається як "Мати <b> приємно | </b> > ". Тоді вам потрібно буде або стрілку праворуч, або вийти з режиму вставки, щоб продовжити решту речення. Ось чому краще рішення, де ви натискаєте клавішу, щоб вставити кінцевий тег, краще.

— екліпі

1

@exclipy Vim має багато вбудованих способів зробити це. Спробуйте для початківців команди "E", "f" та "A".

— користувач456584

3

Я встановив xmledit плагін за допомогою git clone https://github.com/sukima/xmledit.git ~/.vim/bundle/xmledit. Але це працює лише під час редагування файлів .xml. Коли файл ext є .html або .htm, він не працює.

— Чад

2

@Chad в даний час моїм рішенням було скопіювати вставити файл у той самий каталог, точно перейменувати його на "html.vim", щоб він також впливав на HTML-файли. Тепер у мене два таких самих файлів у ~ / .vim / ftplugin (xml.vim та html.vim).

— користувач2719875

56

Мені подобаються мінімальні речі,

imap ,/ </<C-X><C-O>

— sjh
джерело

4

Що робить <CX> <CO>? Це нічого не робить для мене.

— exlipy

8

Бувають випадки, коли хотілося б написати ", /", тому я вважаю за краще користуватися іншим ярликом. Ще одна деталь полягає в тому, що завершення роботи всеохоплюючого пристрою має бути закритим, не чекаючи додаткового введення. Отже:imap <silent> <C-c> </<C-X><C-O><C-X>

1

Дуже круто. Також додано <Esc>F<iв кінці цього, щоб він повертав курсор всередину тегу.

— mVChr

щоб скористатися цією командою в режимі вставки, натисніть, ,/щоб закрити тег

— thedanotto

Наведене вище рішення має велику кількість результатів, але йому не вистачає пояснень, особливо для початківців, як я. Як це працює і як ним користуватися?

— Фемело Хето

50

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

проліт |

натисніть CTRL+x SPACE

і ти отримуєш

<span> | </span>

Ви також можете використовувати CTRL+ x ENTERзамість CTRL+ x SPACE, і отримаєте

<span>
|
</span>

Ragtag може зробити більше, ніж просто (наприклад, вставити <% = речі навколо цього%> або DOCTYPE). Напевно, ви хочете перевірити інші плагіни від автора ragtag , особливо об'ємного .

— Кшисик Гой
джерело

+1 Дивовижно! Btw, це тепер відомо як ragtag: vim.org/scripts/script.php?script_id=1896

— neezer

Цей, безумовно, найпростіший. У текстового партнера це було добре, але Вім перемагає це, дякуючи Кшисику.

— josemota

23

Якщо ви робите що-небудь складне , розсмоктування дуже добре.

Приклад з їх сайту:

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>

— тантез
джерело

Велике спасибі sooooo! Це крутіше, ніж усе, що я бачив раніше, не тільки у Vim, але й серед інших редакторів! Супер!

— Кріс

Це чудовий плагін

— DenniJensen

Цей плагін розвинувся з кодування дзен. Останній зараз відомий як еммет і має трохи більший набір функцій.

— чб

17

Існує також плагін vim zencoding: 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>
  ---------------------

— Преет Кукреті
джерело

що, це творець рубіну?

— tjklemz

13

Картографування

Мені подобається негайно закривати свої теги блоків (на відміну від вбудованих) і якомога простішим ярликом (мені подобається уникати спеціальних клавіш, як, 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> означає запустити новий рядок у режимі вставки над курсором та вставити пробіл

— Кіт Пінсон
джерело

@wds Вау, так, я ніколи не замислювався над тим фактом, що lозначає "право", а не "ліво", ха-ха ... яка смішна помилка. Що ти думав про мій пост? Я помітив, що ви не подавали заявку.

— Кіт Пінсон

Приємно точно. Нещодавно я брав до використання плагін xml.vim (він працює досить непогано). Я б запропонував додати його до вашого .vimrc із специальною командою автокредитування, тобто:au filetype html inoremap <buffer> ...

— wds

1

Нарешті команда Autoclose, яка працює точно як слід - просто!

— cnp

Мені подобається тримати курсор між тегами. Тому я модифікував це відповідно до моєї потреби. inoremap ><Tab> ><Esc>F<lyt>o</<C-r>"><Esc>kJxiВидаляю 0<Space>і додаю kJxi. Перейдіть на 1 крок вгору, з'єднайте два рядки, видаліть один символ і перейдіть у режим вставки.

— Самундра

9

Перевіряти `vim-closetag`

Це дійсно простий скрипт (також доступний як vundleплагін), який закриває (X) HTML-теги для вас. З цього README:

Якщо це поточний вміст:
<table|
Тепер ви натискаєте >, вміст буде:
<table>|</table>
А тепер якщо натиснути >ще раз, вміст буде таким:
<table>
   |
</table>

Примітка: тут |знаходиться курсор

— Шехаряр
джерело

6

allml (тепер Ragtag) та Omni-завершення (<CX> <CO>) не працюють у файлі, наприклад .py чи .java.

якщо ви хочете автоматично закрити тег у цьому файлі, ви можете зробити карту так.

imap <Cj> <ESC> F <lyt> $ a </ ^ R ">

(^ R - Contrl + R: ви можете ввести такий Control + v, а потім Control + r)

(| це позиція курсора), якщо ви введете ..

<p> abcde |

і введіть ^ j

то закрийте тег так:

<p> abcde </p> |

— kimilhee
джерело

з imap <Cj> <ESC> mfF <lyt> `fa </CRCR" "> тег клонування - це те місце, де знаходився курсор, коли ви набирали ^ j замість кінця рядка ($)

— Pietro

5

Ось ще одне просте рішення, засноване на легко знайденому веб-написанні:

Автоматичне закриття тегу HTML

:iabbrev </ </<C-X><C-O>
Увімкнення завершення роботи

autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags

— млоскот
джерело

1

Дивовижна відповідь !!! без плагіна !!! (У другому елементі є linkrot), мабуть, найкраща відповідь з усіх, тому що здається, що швидше змінити .vimrc, а не обробляти плагіни. Плюс найбільш мінімалістична відповідь

— nilon

Це додає місця після закритого тегу :(

— Віталій Зданевич,

4

Здійснюючи відмінну відповідь від @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]та вбудований стиль >>.

— Нік Ерхардт
джерело

Як можна швидко закрити теги HTML у Vim?

Картографування

Використання зразка

Пояснення

Перевіряти vim-closetag

Перевіряти `vim-closetag`