it-swarm.com.de

Wie kann man HTML-Tags in Vim schnell schließen?

Es ist schon eine Weile her, dass ich in Vim HTML-ähnlichen Code schreiben musste, aber kürzlich bin ich wieder auf diesen Code gestoßen. Angenommen, ich schreibe ein einfaches HTML:

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

Wie schreibe ich diese abschließenden Tags für Titel, Kopf und HTML schnell auf? Ich habe das Gefühl, dass ich hier einen wirklich einfachen Weg vermisse, bei dem ich nicht alle nacheinander aufschreibe.

Natürlich kann ich verwenden CtrlP die einzelnen Tag-Namen automatisch zu vervollständigen, aber was mich auf meiner Laptop-Tastatur bringt, ist, die Klammern und Schrägstriche richtig zu setzen.

111
wds

Schauen Sie sich das an ..

closetag.vim

Functions and mappings to close open HTML/XML tags

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

Ich benutze etwas ähnliches.

38
Ian P

Ich finde die Verwendung des xmledit Plugins ziemlich nützlich. Es werden zwei Funktionen hinzugefügt:

  1. Wenn Sie ein Tag öffnen (, zB , tippen Sie <p>), Wird das Tag erweitert, sobald Sie den schließenden > in <p></p> und setzt den Cursor im Einfügemodus in das Tag.
  2. Wenn Sie dann sofort einen anderen > Eingeben (, z. B. , geben Sie <p>>), Wird dies in erweitert

    <p>

    </p>

und platziert den Cursor im Einfügemodus in dem Tag, der einmal eingerückt wurde.

Das xml vim-Plugin fügt diesen Funktionen Code Folding und verschachtelte Tags hinzu.

Natürlich müssen Sie sich überhaupt nicht darum kümmern, Tags zu schließen, wenn Sie Ihren HTML-Inhalt in Markdown schreiben und %! Verwenden, um Ihren Vim-Puffer durch den Markdown-Prozessor Ihrer Wahl zu filtern :)

73
hakamadare

Ich mag minimale Dinge,

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

Ich finde es praktischer, vim zu veranlassen, sowohl das öffnende als auch das schließende Tag für mich zu schreiben, anstatt nur das schließende. Sie können ausgezeichnete Ragtag-Plugin von Tim Pope verwenden. Die Verwendung sieht wie folgt aus (lassen Sie | die Cursorposition markieren), die Sie eingeben:

span |

drücken Sie CTRL+xSPACE

und du bekommst

<span> | </ span>

Sie können auch verwenden CTRL+xENTER Anstatt von CTRL+xSPACEund Sie bekommen

<span> 
 | 
 </ span>

Ragtag kann mehr als nur das (zB <% = stuff around this%> oder DOCTYPE einfügen). Sie möchten wahrscheinlich andere Plugins von Autor von ragtag auschecken, insbesondere Surround .

45
Krzysiek Goj

Wenn Sie etwas Aufwändiges tun, ist sparkup sehr gut.

Ein Beispiel von ihrer Website:

ul > li.item-$*3 erweitert auf:

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

mit einer <C-e>.

Um das in der Frage angegebene Beispiel zu tun,

html > head > title{This is a title}

ausbeuten

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

Es gibt auch ein zencoding vim Plugin: https://github.com/mattn/zencoding-vim

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


Update: das heißt jetzt Emmet: http://emmet.io/


Ein Auszug aus dem Tutorial:

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>
  ---------------------
17
Preet Kukreti

Kartierung

Ich möchte, dass meine Block-Tags (im Gegensatz zu Inline) sofort und mit einer möglichst einfachen Verknüpfung geschlossen werden (ich vermeide gerne spezielle Schlüssel wie CTRL wo möglich, obwohl ich closetag.vim, um meine Inline-Tags zu schließen.) Ich verwende diese Verknüpfung gerne beim Starten von Tags-Blöcken (danke an @kimilhee; dies ist ein Auszug aus seiner Antwort):

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

Beispielnutzung

Art-

<p>[Tab]

Ergebnis-

<p>
 |
</p>

wo | zeigt die Cursorposition an.

Erläuterung

  • inoremapbedeutet Erstellt das Mapping im Einfügemodus
  • ><Tab>bedeutet eine schließende spitze Klammer und ein Tabulatorzeichen; das ist, was zusammengebracht wird
  • ><Esc>bedeutet Das erste Tag beenden und vom Einfügen in den normalen Modus wechseln
  • F<bedeutet finde den letzten Öffnungswinkel
  • lbedeutet Cursor nach rechts bewegen (öffnungswinkel nicht kopieren)
  • yt>bedeutet von Cursorposition nach oben bis vor die nächste schließende spitze Klammer ziehen (d. h. Tags kopieren)
  • o</bedeutet Neue Zeile im Einfügemodus beginnen und eine öffnungswinkel-Klammer und einen Schrägstrich hinzufügen
  • <C-r>"bedeutet Einfügen im Einfügemodus aus dem Standardregister (")
  • ><Esc>bedeutet Schließen Sie das schließende Tag und verlassen Sie den Einfügemodus
  • O<Space>bedeutet Beginne eine neue Zeile im Einfügemodus über dem Cursor und füge ein Leerzeichen ein
11
Keith Pinson

allml (jetzt Ragtag) und Omni-Vervollständigung (<C-X> <C-O>) funktionieren in einer Datei wie .py oder .Java nicht.

wenn Sie das Tag in dieser Datei automatisch schließen möchten, können Sie es folgendermaßen zuordnen.

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

(^ R ist Contrl + R: Sie können wie folgt Strg + v und dann Strg + r eingeben)

(| ist Cursorposition) jetzt, wenn Sie eingeben ..

<p> abcde |

und tippe ^ j

dann schließt es das tag so ..

<p> abcde </ p> |

6
kimilhee

Auschecken vim-closetag

Es ist ein wirklich einfaches Skript (auch als vundle Plugin verfügbar), das (X) HTML-Tags für Sie schließt. Aus dem README:

Wenn dies der aktuelle Inhalt ist:

<table|

Jetzt drückst du >, der Inhalt wird sein:

<table>|</table>

Und jetzt, wenn Sie drücken > Wieder wird der Inhalt sein:

<table>
   |
</table>

Hinweis: | ist der Cursor hier

5
Sheharyar

Hier ist eine weitere einfache Lösung, die auf leicht zu findendem Web-Schreiben basiert:

  1. HTML-Tag automatisch schließen

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

  2. Abschluss einschalten

    autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags

5
mloskot

Aufbauend auf der hervorragenden Antwort von @KeithPinson (es tut uns leid, aber es gibt noch nicht genügend Bewertungspunkte, um Ihre Antwort zu kommentieren) verhindert diese Alternative, dass die automatische Vervollständigung zusätzliche Elemente kopiert, die sich möglicherweise im HTML-Tag befinden (z. B. Klassen, IDs usw.). .), sollte aber nicht in das schließende Tag kopiert werden.

UPDATE Ich habe meine Antwort aktualisiert, um mit filename.html.erb - Dateien zu arbeiten.
Mir ist aufgefallen, dass meine ursprüngliche Antwort in Dateien, die häufig in Rails - Ansichten verwendet werden, wie some_file.html.erb, Bei Verwendung von eingebettetem Ruby (zB <p>Year: <%= @year %><p>). Der folgende Code funktioniert mit .html.erb - Dateien.

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

Beispielnutzung

Art:

<div class="foo">[Tab]

Ergebnis:

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

wobei | die Cursorposition angibt

Und als Beispiel für das Hinzufügen des schließenden Tags inline anstelle des Blockstils:

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

Beispielnutzung

Art:

<div class="foo">[Tab]

Ergebnis:

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

wobei | die Cursorposition angibt

Es ist richtig, dass beide der obigen Beispiele auf >[Tab] Basieren, um ein schließendes Tag zu signalisieren (was bedeutet, dass Sie entweder Inline- oder Blockstil wählen müssten). Persönlich verwende ich den Blockstil mit >[Tab] Und den Inline-Stil mit >>.

4
Nick Erhardt