Jak można szybko zamknąć znaczniki HTML w Vimie?

Minęło trochę czasu od kiedy musiałem zrobić dowolny kod HTML w Vim, ale ostatnio natknąłem się na to ponownie. Powiedzmy, że piszę jakieś proste HTML: 

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

Jak szybko zapisać zamykające znaczniki title, head I html? Czuję, że brakuje mi jakiegoś naprawdę prostego sposobu, który nie wiąże się z zapisywaniem ich wszystkich jeden po drugim.

Oczywiście mogę użyć CtrlP aby autouzupełniać poszczególne nazwy tagów, ale co mnie w laptopie klawiatura jest rzeczywiście coraz wsporniki i Ukośnik prawo.

Author: Sheharyar, 2008-09-25
Source

11 answers

Zobacz też.

Closetag.vim 

Functions and mappings to close open HTML/XML tags

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

Używam czegoś podobnego.
 36
Author: Ian P,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-28 06:32:23

Uważam, że używanie wtyczkixmledit jest bardzo przydatne. dodaje dwa elementy funkcjonalności:

  1. gdy otwierasz znacznik ( np. type <p>), rozszerza on znacznik zaraz po wpisaniu zamykającego > do <p></p> i umieszcza kursor wewnątrz znacznika w trybie wstawiania.

  2. Jeśli następnie natychmiast wpisz inny > (np. wpisujesz <p>>), rozszerza to na

    <p>

    </p>

I umieszcza kursor wewnątrz znacznika, wcięty raz, w trybie wstawiania.

Wtyczka XML vim dodaje do tych funkcji składanie kodu i dopasowanie zagnieżdżonego znacznika.

Oczywiście, nie musisz się martwić o zamykanie tagów, jeśli piszesz zawartość HTML w Markdown i używasz %! do filtrowania bufora Vim przez wybrany procesor Markdown:)

 71
Author: hakamadare,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-28 03:36:13

Lubię Minimalne rzeczy, 

imap ,/ </<C-X><C-O>
 52
Author: sjh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-02-10 14:55:18

Uważam, że bardziej wygodne jest zmuszenie Vima do pisania zarówno znacznika otwierającego, jak i zamykającego dla mnie, zamiast tylko zamykającego. Możesz użyć doskonałej wtyczki ragtag autorstwa Tima Pope ' a. Użycie wygląda tak (zaznacz / zaznacz pozycję kursora) wpisujesz: 

span|

Naciśnij CTRL+x przestrzeń

I dostajesz 

<span>|</span>

Możesz również użyć CTRL+x wpisz zamiast CTRL+x SPACE , a Ty get 

<span>
|
</span>

Ragtag może zrobić więcej niż tylko to (np. insert or DOCTYPE). Prawdopodobnie chcesz sprawdzić inne wtyczki autora ragtag, zwłaszcza surround .

 42
Author: Krzysiek Goj,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-21 12:02:24

Jeśli robisz coś wymyślnego, sparkup jest bardzo dobry.

Przykład z ich strony:

ul > li.item-$*3 rozszerza się na: 

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

Z <C-e>.

Aby wykonać przykład podany w pytaniu, 

html > head > title{This is a title}


<html>
  <head>
    <title>This is a title</title>
  </head>
</html>
 23
Author: thanthese,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-12-14 12:12:31

Istnieje również wtyczka zencoding vim: https://github.com/mattn/zencoding-vim

Tutorial: https://github.com/mattn/zencoding-vim/blob/master/TUTORIAL

Update: this now called Emmet: http://emmet.io/

Fragment tutoriala: 

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>
  ---------------------
 16
Author: Preet Kukreti,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-15 11:06:06

Mapowanie

Lubię, gdy moje znaczniki blokowe (w przeciwieństwie do inline) są zamykane natychmiast i za pomocą tak prostego skrótu, jak to możliwe (Lubię unikać specjalnych klawiszy, takich jak CTRL, jeśli to możliwe, chociaż używam closetag.vim, aby zamknąć moje znaczniki inline.) Lubię używać tego skrótu przy rozpoczynaniu bloków tagów (dzięki @kimilhee; jest to start z jego odpowiedzi): {]} 

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

Przykładowe użycie

Typ - 

<p>[Tab]

Wynik-

<p>
 |
</p>

Gdzie | wskazuje pozycja kursora.

Wyjaśnienie

  • inoremap oznacza tworzenie mapowania w trybie insert
  • ><Tab> oznacza nawias kątowy zamykający i znak tabulacji; jest to dopasowane
  • ><Esc> oznacza koniec pierwszego znacznika i wyjście z insert w tryb normalny
  • F< oznacza znajdź ostatni wspornik kąta otwarcia
  • l oznacza przesunięcie kursora w prawo (nie kopiuj kąta otwarcia bracket)
  • yt> oznacza przesunięcie od pozycji kursora do góry, aż do następnego nawiasu kątowego zamykania (tj. kopiowanie zawartości znaczników)
  • o</ oznacza rozpocząć nową linię w trybie wstawiania i dodać wspornik kąta otwarcia i Ukośnik
  • <C-r>" oznacza wklej w trybie wstawiania z domyślnego rejestru (")
  • ><Esc> oznacza zamknięcie znacznika zamknięcia i wyjście z trybu wstawiania
  • O<Space> oznacza rozpoczęcie nowej linii w tryb wstawiania nad kursorem i wstawianie spacji
 9
Author: Keith Pinson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-15 20:31:00

Allml (teraz Ragtag ) i Omni-completion ( ) nie działa w pliku takim jak .py lub .java.

Jeśli chcesz zamknąć tag automatycznie w tym pliku, możesz mapować w ten sposób.

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

( ^R to Contrl+R: możesz wpisać w ten sposób Control + v, a następnie Control + r)

(| jest pozycją kursora ) teraz, jeśli piszesz..

Abcde /

I wpisz ^j

Następnie zamyka znacznik w ten sposób..

Abcde |

 6
Author: kimilhee,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-05-29 09:27:11

Zobacz vim-closetag

Jest to naprawdę prosty skrypt (dostępny również jako wtyczka vundle), który zamyka (X) Znaczniki HTML dla Ciebie. Od README:

Jeśli to jest aktualna treść: 

<table|

Teraz naciskasz >, treść będzie: 

<table>|</table>

A teraz, jeśli naciśniesz > znowu treść będzie: 

<table>
   |
</table>

uwaga: {[6] } jest tutaj kursor

 4
Author: Sheharyar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-24 00:15:11

Oto kolejne proste rozwiązanie oparte na łatwym do znalezienia pisaniu w sieci:

  1. Automatyczne zamykanie znacznika HTML

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

  2. Włączanie zakończenia

    autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags

 3
Author: mloskot,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-26 12:10:54

Opierając się na doskonałej odpowiedzi autorstwa @KeithPinson (niestety, za mało punktów reputacji, aby skomentować Twoją odpowiedź), ta alternatywa uniemożliwi autouzupełnianie kopiowania czegokolwiek dodatkowego, co może znajdować się wewnątrz tagu html (np. klas, identyfikatorów itp...), ale nie powinny być kopiowane do znacznika zamykającego.

UPDATE zaktualizowałem swoją odpowiedź do pracy z plikami filename.html.erb.
Zauważyłem, że moja oryginalna odpowiedź nie działa w plikach powszechnie używanych w widokach Rails, takich jak some_file.html.erb kiedy używałem embedded ruby(np. <p>Year: <%= @year %><p>). Poniższy kod będzie działał z plikami .html.erb.

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

Przykładowe użycie

Typ: 

<div class="foo">[Tab]

Wynik: 

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

Gdzie | wskazuje pozycję kursora

I jako przykład dodawania znacznika zamykającego w wierszu zamiast stylu blokowego: 

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

Przykładowe użycie

Typ: 

<div class="foo">[Tab]

Wynik: 

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

Gdzie | wskazuje kursor pozycja

Prawdą jest, że oba powyższe przykłady polegają na >[Tab], aby sygnalizować tag zamykający (co oznacza, że będziesz musiał wybrać albo styl inline lub block). Osobiście używam stylu blokowego z >[Tab] i stylu inline z >>.

 3
Author: Nick Erhardt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-28 03:23:38