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

117

Minęło trochę czasu, odkąd musiałem pisać jakikolwiek kod podobny do HTML Vim, ale ostatnio znowu się z tym spotkałem. Powiedz, że piszę kilka prostych HTML:

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

Jak szybko napisać te zamykające tagi dla tytułu, nagłówka i HTML? Czuję, że brakuje mi tutaj naprawdę prostego sposobu, który nie wymaga zapisywania ich wszystkich jeden po drugim.

Oczywiście mogę użyć CtrlPdo autouzupełniania poszczególnych nazw tagów, ale to, co dostaje się na klawiaturę laptopa, to w rzeczywistości prawidłowe nawiasy i ukośnik.

html xml vim autocomplete wds
źródło

Odpowiedzi:

38

Sprawdź to..

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.

Ian P
źródło
Zainstalowałem to. Nie zamyka tagu automatycznie. Jaki jest skrót? Próbuję Ctrl-_, ale to robi małą czcionkę na moim terminalu.
alhelal
74

Uważam, że użycie wtyczki xmledit jest całkiem przydatne. dodaje dwie funkcjonalności:

  1. Kiedy otwierasz znacznik ( np. Typ <p>), rozwija on znacznik zaraz po wpisaniu zamykania >do <p></p>i umieszcza kursor wewnątrz znacznika w trybie wstawiania.

  2. Jeśli następnie natychmiast wpiszesz inny >( np. Wpiszesz <p>>), to rozwinie to do

    <p>

    </p>

i umieszcza kursor wewnątrz znacznika, jednokrotnie wcięty, w trybie wstawiania.

Xml vim Wtyczka dodaje zwijania kodu i zagnieżdżony dopasowania tag do tych funkcji.

Oczywiście nie musisz się w ogóle martwić o zamykanie tagów, jeśli napiszesz zawartość HTML w Markdown i użyjesz %!do filtrowania bufora Vima przez wybrany przez Ciebie procesor Markdown :)

hakamadare
źródło
Czy ta wtyczka może automatycznie zamykać tagi po wpisaniu „</”? A może po prostu wstaw tag zamykający za pomocą jakiegoś naciśnięcia klawisza? Czasami usuwasz tag zamykający i chcesz go wstawić później ...
bzx,
7
Nie podoba mi się ta wtyczka, ponieważ nie zapewnia łatwego sposobu na przejście kursora poza wygenerowany tag. Na przykład, jeśli chcesz napisać „Miłego <b> miłego </b> dnia”, zaczynasz od wpisania „Miłego <b> miłego”, co renderuje się jako „Miłego <b> miłego </b> dnia”. > ”. Następnie musisz albo nacisnąć strzałkę w prawo, albo wyjść z trybu wstawiania, aby kontynuować resztę zdania. Dlatego lepsze jest rozwiązanie polegające na naciśnięciu klawisza w celu wstawienia znacznika końcowego.
exclipy
1
@exclipy Vim ma wiele wbudowanych sposobów, aby to zrobić. Na początek wypróbuj polecenia „E”, „f” i „A”.
user456584
3
Zainstalowałem wtyczkę xmledit z git clone https://github.com/sukima/xmledit.git ~/.vim/bundle/xmledit. Ale działa tylko podczas edycji plików .xml. Gdy rozszerzenie pliku to .html lub .htm, to nie działa.
Czad
2
@Chad obecnie moim rozwiązaniem było skopiowanie i wklejenie pliku do tego samego katalogu, dokładnie zmień jego nazwę na „html.vim”, aby wpłynęło to również na pliki HTML. Teraz mam dwa takie same pliki w ~ / .vim / ftplugin (xml.vim i html.vim).
user2719875
56

Lubię rzeczy minimalne, 

imap ,/ </<C-X><C-O>
sjh
źródło
4
Co robi <CX> <CO>? To nic dla mnie nie robi.
exclipy
8
Są przypadki, w których chciałoby się napisać „, /”, więc wolałbym użyć innego skrótu. Innym szczegółem jest to, że omni-uzupełnianie powinno zostać zamknięte, nie czekając na dodatkowe dane wejściowe. A więc:imap <silent> <C-c> </<C-X><C-O><C-X>
1
Bardzo fajny. Dodany również <Esc>F<ina końcu tego, więc umieszcza kursor z powrotem wewnątrz tagu.
mVChr
aby użyć tego polecenia, należy znajdować się w trybie wstawiania, a następnie nacisnąć, ,/aby zamknąć tag
thedanotto
Powyższe rozwiązanie ma wiele pozytywnych opinii, ale brakuje mu wyjaśnienia, zwłaszcza dla początkującego takiego jak ja. Jak to działa i jak się go używa?
Phemelo Khetho
50

Uważam, że wygodniej jest sprawić, by vim napisał dla mnie zarówno tag otwierający, jak i zamykający, zamiast tylko zamykającego. Możesz użyć doskonałej wtyczki Ragtag autorstwa Tima Pope'a. Sposób użycia wygląda następująco (zaznacz | pozycję kursora), gdy wpisujesz:

rozpiętość |

naciśnij CTRL+x SPACE

i dostajesz

<span> | </span>

Możesz także użyć CTRL+ x ENTERzamiast CTRL+ x SPACEi otrzymasz

<span>
|
</span>

Ragtag może zrobić więcej niż tylko to (np. Wstaw <% = rzeczy wokół tego%> lub DOCTYPE). Prawdopodobnie chcesz sprawdzić inne wtyczki autora ragtag , zwłaszcza surround .

Krzysiek Goj
źródło
+1 Super! Przy okazji, jest to teraz znane jako ragtag: vim.org/scripts/script.php?script_id=1896
neezer
Ten jest zdecydowanie najprostszy. Textmate miał to dobrze, ale Vim to pokonuje, dzięki Krzysiek.
josemota
23

Jeśli robisz coś skomplikowanego, sparkup jest bardzo dobry.

Przykład z ich strony:

ul > li.item-$*3 rozwija się do:

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

z <C-e>.

Aby zrobić przykład podany w pytaniu, 

html > head > title{This is a title}

plony

<html>
  <head>
    <title>This is a title</title>
  </head>
</html>
niż te
źródło
Dziękuję bardzo! To jest fajniejsze niż cokolwiek, co widziałem wcześniej, nie tylko Vim, ale wśród innych edytorów! Wspaniały!
Chris,
To świetna wtyczka
DenniJensen,
Ta wtyczka wyewoluowała z kodowania zen. Ten ostatni jest teraz znany jako emmet i ma nieco większy zestaw funkcji.
chb
17

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

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

Aktualizacja: to teraz nazywa się Emmet : http://emmet.io/

Fragment samouczka:

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>
  ---------------------
Preet Kukreti
źródło
whoa, czy to twórca rubinu?
tjklemz,
13

Mapowanie

Lubię, gdy moje tagi blokowe (w przeciwieństwie do wbudowanych) są natychmiast zamykane i za pomocą tak prostego skrótu, jak to tylko możliwe (lubię unikać specjalnych klawiszy, takich jak CTRLtam, gdzie to możliwe, chociaż używam closetag.vimdo zamykania moich tagów w wierszu). Lubię tego używać skrót przy uruchamianiu bloków tagów (dzięki @kimilhee; oto początek jego odpowiedzi):

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

Przykładowe użycie

Rodzaj-

<p>[Tab]

Wynik-

<p>
 |
</p>

gdzie |wskazuje pozycję kursora.

Wyjaśnienie

  • inoremap oznacza utworzenie mapowania w trybie wstawiania
  • ><Tab> oznacza zamykające nawiasy ostre i znak tabulacji; to jest to, co jest dopasowane
  • ><Esc> oznacza zakończenie pierwszego znacznika i wyjście z trybu wstawiania do normalnego trybu
  • F< oznacza znalezienie ostatniego otwierającego nawiasu kątowego
  • l oznacza przesunięcie kursora w prawo (nie kopiuj otwierającego nawiasu kątowego)
  • yt> oznacza szarpnięcie od pozycji kursora do góry, aż do następnego zamykającego nawiasu kątowego (tj. kopiowanie zawartości znaczników)
  • o</ oznacza rozpoczęcie nowej linii w trybie wstawiania i dodanie nawiasu kątowego otwierającego i ukośnika
  • <C-r>" oznacza wklejanie w trybie wstawiania z domyślnego rejestru ( ")
  • ><Esc> oznacza zamknięcie zamykającego znacznika i wyjście z trybu wstawiania
  • O<Space> oznacza rozpoczęcie nowej linii w trybie wstawiania nad kursorem i wstawienie spacji
Keith Pinson
źródło
@wds Wow, tak, nigdy nie myślałem o tym, że loznaczało to „dobrze”, a nie „lewo”, haha ​​... co za zabawny błąd. Co myślisz o moim poście? Zauważyłem, że nie głosowałeś za.
Keith Pinson
Na pewno miło. Ostatnio zacząłem używać wtyczki xml.vim (działa całkiem nieźle). Sugerowałbym dodanie go do twojego .vimrc za pomocą autokomendy specyficznej dla typu pliku, np .:au filetype html inoremap <buffer> ...
wds
1
Wreszcie polecenie Autoclose, które działa dokładnie tak, jak powinno - po prostu!
cnp
Lubię trzymać kursor pomiędzy tagami. Więc zmodyfikowałem go tak, aby odpowiadał moim potrzebom. inoremap ><Tab> ><Esc>F<lyt>o</<C-r>"><Esc>kJxiUsunąłem 0<Space>i dodałem kJxi. Idź o 1 krok w górę, połącz dwie linie, usuń jeden znak, a następnie przejdź do trybu wstawiania.
Samundra
9

Sprawdzić vim-closetag

To naprawdę prosty skrypt (dostępny również jako vundlewtyczka), który zamyka tagi (X) HTML za Ciebie. Od tego README:

Jeśli to jest aktualna treść:

<table|

Teraz naciśniesz >, zawartość będzie wyglądać następująco:

<table>|</table>

A teraz, jeśli naciśniesz >ponownie, zawartość będzie wyglądać następująco:

<table>
   |
</table>

Uwaga: |jest tu kursor

Sheharyar
źródło
6

allml (obecnie Ragtag) i Omni-Complete (<CX> <CO>) nie działają w plikach takich jak .py czy .java.

jeśli chcesz automatycznie zamknąć tag w tych plikach, możesz mapować w ten sposób.

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

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

(| to pozycja kursora) teraz, jeśli wpiszesz ..

<p> abcde |

i wpisz ^ j

następnie zamyka tag w ten sposób ...

<p> abcde </p> |

kimilhee
źródło
z imap <Cj> <ESC> mfF <lyt> `fa </ <CR>"> tag klonowania to miejsce, w którym znajdował się kursor po wpisaniu ^ j zamiast końca linii ($)
Pietro
5

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

  1. Automatyczne zamykanie tagu HTML

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

  2. Włączam zakończenie

    autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags

mloskot
źródło
1
Niesamowita odpowiedź !!! bez wtyczki !!! (Druga pozycja zawiera linkrot) wciąż prawdopodobnie najlepszą odpowiedzią ze wszystkich, ponieważ wydaje się, że szybsza jest modyfikacja .vimrc niż obsługiwanie wtyczek. Plus najbardziej minimalistyczna odpowiedź
nilon
To dodaje przestrzeni po zamkniętym tagu :(
Witalij Zdanevich
4

Opierając się na doskonałej odpowiedzi autorstwa @KeithPinson (przepraszam, za mało punktów reputacji, aby skomentować Twoją odpowiedź), ta alternatywa uniemożliwi autouzupełnianie kopiowanie jakichkolwiek dodatkowych elementów, które mogą znajdować się w tagu HTML (np. Klasy, identyfikatory itp.) .), ale nie należy ich kopiować do tagu zamykającego.

UPDATE Zaktualizowałem swoją odpowiedź, aby pracować z filename.html.erbplikami.
Zauważyłem, że moja pierwotna odpowiedź nie działała w plikach powszechnie używanych w widokach Railsów, na przykład some_file.html.erbgdy używałem osadzonego ruby ​​(np <p>Year: <%= @year %><p>.). Poniższy kod będzie działał z .html.erbplikami.

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

Przykładowe użycie

Rodzaj:

<div class="foo">[Tab]

Wynik:

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

gdzie |wskazuje pozycję kursora

Jako przykład dodania zamykającego znacznika w linii zamiast stylu blokowego:

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

Przykładowe użycie

Rodzaj:

<div class="foo">[Tab]

Wynik:

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

gdzie |wskazuje pozycję kursora

To prawda, że oba powyższe przykłady opierają się na >[Tab]sygnalizowanie znacznika zamykającego (czyli trzeba by wybrać albo inline lub styl grupowych). Osobiście używam stylu blokowego >[Tab]zi stylu inline z >>.

Nick Erhardt
źródło