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

117

Es ist schon eine Weile her, dass ich HTML-ähnlichen Code einbauen musste Vim, aber kürzlich bin ich wieder darauf gestoßen. Angenommen, ich schreibe einige einfache 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 mir hier ein wirklich einfacher Weg fehlt, bei dem ich sie nicht alle einzeln aufschreiben muss.

Natürlich kann ich CtrlPdie einzelnen Tag-Namen automatisch vervollständigen, aber was mich auf meiner Laptop-Tastatur bringt, ist, die Klammern und den Schrägstrich richtig zu machen.

html xml vim autocomplete wds
quelle

Antworten:

38

Schau dir das an ..

schrankag.vim 

Functions and mappings to close open HTML/XML tags

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

Ich benutze etwas ähnliches.

Ian P.
quelle
Ich habe das installiert. Das Schließen des Tags wird nicht automatisch abgeschlossen. Was ist der Shortkey? Ich versuche es Ctrl-_, aber das macht kleine Schrift meines Terminals.
Alhelal
74

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

  1. Wenn Sie ein Tag öffnen ( z. B. Typ <p>), wird das Tag erweitert, sobald Sie das Schließen >eingeben, <p></p>und der Cursor befindet sich im Einfügemodus innerhalb des Tags.

  2. Wenn Sie dann sofort eine andere eingeben >( z. B. eingeben <p>>), wird diese erweitert

    <p>

    </p>

und platziert den Cursor innerhalb des Tags, der einmal eingerückt ist, im Einfügemodus.

Das XML- Vim-Plugin fügt diesen Funktionen Code-Faltung und verschachtelte Tag-Anpassung hinzu.

Natürlich müssen Sie sich keine Gedanken über das Schließen von Tags machen, wenn Sie Ihren HTML-Inhalt in Markdown schreiben und %!Ihren Vim-Puffer durch den Markdown-Prozessor Ihrer Wahl filtern :)

hakamadare
quelle
Kann dieses Plugin Tags automatisch schließen, wenn '</' eingegeben wird? Oder einfach das schließende Tag mit einem Tastendruck einfügen? Manchmal
löschst
7
Ich mag dieses Plugin nicht, weil es keine einfache Möglichkeit bietet, den Cursor über das generierte Tag zu bewegen. Wenn Sie beispielsweise "Have a <b> nice </ b> day" schreiben möchten, geben Sie zunächst "Have a <b> nice" ein, was als "Have a <b> nice | </ b" dargestellt wird > ". Sie müssen dann entweder mit dem Pfeil nach rechts über den Einfügemodus fahren oder ihn verlassen, um mit dem Rest des Satzes fortzufahren. Aus diesem Grund ist eine Lösung besser, bei der Sie eine Taste drücken, um das End-Tag einzufügen.
Ausschluss
1
@exclipy Vim bietet zahlreiche integrierte Möglichkeiten, dies zu tun. Probieren Sie zunächst die Befehle 'E', 'f' und 'A' aus.
user456584
3
Ich habe das xmledit Plugin mit installiert git clone https://github.com/sukima/xmledit.git ~/.vim/bundle/xmledit. Dies funktioniert jedoch nur beim Bearbeiten von XML-Dateien. Wenn die Datei ext .html oder .htm ist, funktioniert sie nicht.
Tschad
2
@Chad derzeit bestand meine Lösung darin, die Datei zu kopieren und in dasselbe Verzeichnis einzufügen, um sie exakt in "html.vim" umzubenennen, damit sie auch HTML-Dateien beeinflusst. Jetzt habe ich zwei der exakt gleichen Dateien in ~ / .vim / ftplugin (xml.vim und html.vim).
user2719875
56

Ich mag minimale Dinge, 

imap ,/ </<C-X><C-O>
sjh
quelle
4
Was macht <CX> <CO>? Es tut nichts für mich.
Ausschluss
8
Es gibt Fälle, in denen man ", /" schreiben möchte, daher möchte ich lieber eine andere Verknüpfung verwenden. Ein weiteres Detail ist, dass die Omni-Vervollständigung geschlossen werden sollte, ohne auf zusätzliche Eingaben zu warten. Also:imap <silent> <C-c> </<C-X><C-O><C-X>
1
Sehr cool. Wird auch <Esc>F<iam Ende hinzugefügt , damit der Cursor wieder in das Tag eingefügt wird .
MVChr
,/
Um
Die obige Lösung hat viele positive Stimmen, aber es fehlt eine Erklärung, insbesondere für Anfänger wie mich. Wie funktioniert es und wie benutzt man es?
Phemelo Khetho
49

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

span |

Drücken Sie CTRL+x SPACE

und du bekommst

<span> | </ span>

Sie können auch CTRL+ x ENTERanstelle von CTRL+ verwenden x SPACE, und Sie erhalten

<span>
|
</ span>

Ragtag kann mehr als nur das (z. B. <% = Zeug um dieses%> oder DOCTYPE einfügen). Sie möchten wahrscheinlich andere Plugins des Autors von ragtag ausprobieren , insbesondere Surround .

Krzysiek Goj
quelle
+1 Super! Übrigens ist dies jetzt bekannt als ragtag: vim.org/scripts/script.php?script_id=1896
neezer
Dieser ist definitiv der einfachste. Textmate hatte es gut, aber Vim schlägt es damit, danke Krzysiek.
Josemota
23

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

Ein Beispiel von ihrer Website:

ul > li.item-$*3 erweitert sich zu:

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

mit einem <C-e>.

Um das in der Frage gegebene Beispiel zu tun, 

html > head > title{This is a title}

ergibt

<html>
  <head>
    <title>This is a title</title>
  </head>
</html>
als diese
quelle
Vielen Dank! Das ist cooler als alles, was ich bisher gesehen habe, nicht nur Vim, sondern auch alle anderen Editoren! Super!
Chris
Dies ist ein großer Plugin
DenniJensen
Dieses Plugin ist aus der Zen-Codierung hervorgegangen. Letzteres ist jetzt als Emmet bekannt und verfügt über einen etwas größeren Funktionsumfang.
chb
17

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

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

Update: Dies 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>
  ---------------------
Preet Kukreti
quelle
whoa, ist das vom Schöpfer von Ruby?
tjklemz
13

Kartierung

Ich möchte, dass meine Block-Tags (im Gegensatz zu Inline-Tags) sofort und mit einer möglichst einfachen Verknüpfung geschlossen werden (ich möchte Sondertasten wie CTRLmöglich vermeiden , obwohl ich sie closetag.vimzum Schließen meiner Inline-Tags verwende.) Ich verwende diese gerne Verknüpfung beim Starten von Tag-Blöcken (danke an @kimilhee; dies ist ein Start 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

  • inoremap bedeutet , das Mapping im Einfügemodus zu erstellen
  • ><Tab> bedeutet eine schließende spitze Klammer und ein Tabulatorzeichen; das ist, was abgestimmt ist
  • ><Esc> bedeutet, das erste Tag zu beenden und aus dem Einfügen in den normalen Modus zu entkommen
  • F< bedeutet , die letzte Öffnungswinkelhalterung zu finden
  • l bedeutet , den Cursor nach rechts zu bewegen (Kopierwinkel nicht kopieren)
  • yt> bedeutet, von der Cursorposition nach oben bis vor der nächsten schließenden Klammer zu ziehen (dh den Inhalt der Tags kopieren)
  • o</ bedeutet , dass Sie im Einfügemodus eine neue Zeile beginnen und eine Öffnungswinkelklammer und einen Schrägstrich hinzufügen
  • <C-r>" bedeutet Einfügen im Einfügemodus aus dem Standardregister ( ")
  • ><Esc> bedeutet, das schließende Tag zu schließen und den Einfügemodus zu verlassen
  • O<Space> bedeutet , eine neue Zeile im Einfügemodus über dem Cursor zu beginnen und ein Leerzeichen einzufügen
Keith Pinson
quelle
@wds Wow, ja, ich habe nie darüber nachgedacht, dass l"rechts" und nicht "links" bedeutet, haha ​​... was für ein lustiger Fehler. Was denkst du über meinen Beitrag? Mir ist aufgefallen, dass du nicht positiv gestimmt hast.
Keith Pinson
Auf jeden Fall schön. Ich habe kürzlich das xml.vim-Plugin verwendet (es funktioniert ganz gut). Ich würde vorschlagen, es zu Ihrer .vimrc mit einem filetypspezifischen automatischen Befehl hinzuzufügen, dh:au filetype html inoremap <buffer> ...
wds
1
Endlich ein Autoclose-Befehl, der genau so funktioniert, wie er sollte - einfach!
CNP
Ich halte meinen Cursor gerne zwischen Tags. Also habe ich es an meine Bedürfnisse angepasst. inoremap ><Tab> ><Esc>F<lyt>o</<C-r>"><Esc>kJxiIch entferne 0<Space>und fügte hinzu kJxi. Gehen Sie 1 Schritt nach oben, verketten Sie zwei Zeilen, entfernen Sie ein Zeichen und wechseln Sie in den Einfügemodus.
Samundra
9

Auschecken vim-closetag

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

Wenn dies der aktuelle Inhalt ist:

<table|

Jetzt drücken Sie >, der Inhalt wird sein:

<table>|</table>

Und jetzt, wenn Sie >erneut drücken, lautet der Inhalt:

<table>
   |
</table>

Hinweis: |ist hier der Cursor

Sheharyar
quelle
6

allml (jetzt Ragtag) und Omni-Completion (<CX> <CO>) funktionieren in einer Datei wie .py oder .java nicht.

Wenn Sie das Tag in diesen Dateien automatisch schließen möchten, können Sie es wie folgt zuordnen.

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

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

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

<p> abcde |

und tippe ^ j

dann schließt es das Tag so ..

<p> abcde </ p> |

Kimilhee
quelle
mit imap <Cj> <ESC> mfF <lyt> `fa </ <CR>"> befindet sich das Klon-Tag dort, wo sich der Cursor befand, als Sie ^ j anstelle des Zeilenende ($) eingegeben haben
Pietro
5

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

  1. Automatisches Schließen eines HTML-Tags

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

  2. Abschluss einschalten

    autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags

Mloskot
quelle
1
Super Antwort !!! ohne Plugin !!! (2. Punkt hat Linkrot) immer noch vielleicht die beste Antwort von allen, weil es schneller zu sein scheint, die .vimrc zu ändern, als Plugins zu handhaben. Plus die minimalistischste Antwort
Nilon
Dies fügt Platz nach dem geschlossenen Tag :(
Vitaly Zdanevich
4

Aufbauend auf der hervorragenden Antwort von @KeithPinson (leider noch nicht genügend Reputationspunkte, 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.erbDateien zu arbeiten .
Ich habe festgestellt, dass meine ursprüngliche Antwort in Dateien, die häufig in Rails-Ansichten verwendet werden, nicht funktioniert hat, some_file.html.erbz <p>Year: <%= @year %><p>. B. wenn ich eingebettetes Ruby verwendet habe (z . B. ). Der folgende Code wird mit arbeiten .html.erbDateien.

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

Beispielnutzung

Art:

<div class="foo">[Tab]

Ergebnis:

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

wo |zeigt die Cursorposition an

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>

wo |zeigt die Cursorposition an

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

Nick Erhardt
quelle