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.

— wds
źródło

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:

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.
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:

Automatyczne zamykanie tagu HTML

:iabbrev </ </<C-X><C-O>
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

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

Mapowanie

Przykładowe użycie

Wyjaśnienie

Sprawdzić vim-closetag

Sprawdzić `vim-closetag`