117

È passato un po 'di tempo dall'ultima volta che ho dovuto creare un codice simile a HTML Vim, ma recentemente mi sono imbattuto di nuovo in questo. Dì che sto scrivendo alcune semplici HTML:

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

Come scrivo rapidamente quei tag di chiusura per titolo, head e html? Mi sento come se mi mancasse un modo molto semplice qui che non mi coinvolga nel scriverli tutti uno per uno.

Ovviamente posso usare CtrlPper completare automaticamente i singoli nomi dei tag, ma quello che mi ottiene sulla tastiera del mio laptop è in realtà ottenere le parentesi e la barra a destra.

— wds
fonte

38

Controllalo..

closetag.vim

Functions and mappings to close open HTML/XML tags

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

Uso qualcosa di simile.

— Ian P
fonte

L'ho installato. Non ha completato la chiusura automatica del tag. Qual è il tasto di scelta rapida? Ci provo Ctrl-_, ma questo rende i caratteri piccoli del mio terminale.

— alhelal

74

Trovo che usare il plugin xmledit sia piuttosto utile. aggiunge due pezzi di funzionalità:

Quando si apre un tag ( es tipo <p>), si espande il tag come appena si digita la chiusura >in <p></p>e posiziona il cursore all'interno del tag in modalità di inserimento.
Se poi ne digiti immediatamente un altro >( ad es. Digiti <p>>), lo espande in

<p>

</p>

e posiziona il cursore all'interno del tag, rientrato una volta, in modalità di inserimento.

Il plugin xml vim aggiunge la piegatura del codice e la corrispondenza dei tag nidificati a queste funzionalità.

Ovviamente, non devi preoccuparti di chiudere i tag se scrivi il tuo contenuto HTML in Markdown e lo usi %!per filtrare il tuo buffer Vim attraverso il processore Markdown di tua scelta :)

— hakamadare
fonte

Questo plugin può chiudere automaticamente i tag quando si digita "</"? O semplicemente inserire il tag di chiusura con qualche tasto? A volte elimini il tag di chiusura e desideri che venga inserito in seguito ...

— bzx

7

Non mi piace questo plugin perché non fornisce un modo semplice per far passare il cursore oltre il tag generato. Ad esempio, se vuoi scrivere "Buona <b> giornata </b>", inizia digitando "Buona <b> simpatica", che viene restituita come "Buona <b> bella | </ b >". È quindi necessario selezionare la freccia destra o uscire dalla modalità di inserimento per continuare con il resto della frase. Ecco perché una soluzione in cui si preme un tasto per inserire il tag di fine è migliore.

— exclipy

1

@exclipy Vim ha molti modi integrati per farlo. Prova i comandi "E", "f" e "A" per i principianti.

— user456584

3

Ho installato il plugin xmledit con git clone https://github.com/sukima/xmledit.git ~/.vim/bundle/xmledit. Ma funziona solo durante la modifica di file .xml. Quando il file ext è .html o .htm, non funziona.

— Ciad

2

@Chad attualmente, la mia soluzione era copiare e incollare il file nella stessa directory rinominandolo esattamente in "html.vim" in modo che abbia effetto anche sui file HTML. Ora, ho due degli stessi identici file in ~ / .vim / ftplugin (xml.vim e html.vim).

— user2719875

56

Mi piacciono le cose minime,

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

— sjh
fonte

4

Cosa fa <CX> <CO>? Non fa niente per me.

— exclipy

8

Ci sono casi in cui si vorrebbe scrivere ", /", quindi preferisco usare una scorciatoia diversa. Un altro dettaglio è che l'omni-completamento dovrebbe essere chiuso, senza attendere ulteriori input. Quindi:imap <silent> <C-c> </<C-X><C-O><C-X>

1

Molto bello. Aggiunto anche <Esc>F<ialla fine di questo in modo che rimetta il cursore all'interno del tag.

— mVChr

per utilizzare questo comando essere in modalità di inserimento, quindi premere ,/per chiudere il tag

— thedanotto

La soluzione di cui sopra ha molti voti positivi ma manca di spiegazioni soprattutto per un principiante come me. Come funziona e come si usa?

— Phemelo Khetho

50

Trovo più conveniente fare in modo che vim scriva sia il tag di apertura che quello di chiusura per me, invece che solo quello di chiusura. Puoi usare un eccellente plugin ragtag di Tim Pope. L'utilizzo è simile a questo (lascia | segnare la posizione del cursore) digiti:

arco |

premere CTRL+x SPACE

e ottieni

<Span> | </ span>

Puoi anche usare CTRL+ x ENTERinvece di CTRL+ x SPACEe ottieni

<Span>
|
</ Span>

Ragtag può fare molto di più (es. Inserire <% = roba attorno a questo%> o DOCTYPE). Probabilmente vorrai controllare altri plugin dell'autore di ragtag , specialmente surround .

— Krzysiek Goj
fonte

+1 Fantastico! A proposito, ora è noto come ragtag: vim.org/scripts/script.php?script_id=1896

— neezer

Questo è sicuramente il più semplice. Textmate ha funzionato bene, ma Vim lo batte con questo, grazie Krzysiek.

— josemota

23

Se stai facendo qualcosa di elaborato, Sparkup è molto buono.

Un esempio dal loro sito:

ul > li.item-$*3 si espande a:

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

con a <C-e>.

Per fare l'esempio fornito nella domanda,

html > head > title{This is a title}

i rendimenti

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

— thanthese
fonte

Grazie mille! Questo è più bello di qualsiasi cosa abbia mai visto prima, non solo Vim ma tra tutti gli altri editor! Super!

— Chris

Questo è un ottimo plugin

— DenniJensen

Questo plugin si è evoluto dalla codifica zen. Quest'ultimo è ora noto come emmet e ha un set di funzionalità leggermente più ampio.

— chb

17

C'è anche un plugin vim zencoding: https://github.com/mattn/zencoding-vim

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

Aggiornamento: questo ora si chiama Emmet : http://emmet.io/

Un estratto dal 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
fonte

whoa, è quello del creatore di ruby?

— tjklemz

13

Mappatura

Mi piace avere i miei tag di blocco (al contrario di inline) chiusi immediatamente e con una scorciatoia il più semplice possibile (mi piace evitare tasti speciali come CTRLdove possibile, anche se uso closetag.vimper chiudere i miei tag inline.) Mi piace usare questo scorciatoia quando si iniziano blocchi di tag (grazie a @kimilhee; questo è un punto di partenza della sua risposta):

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

Utilizzo del campione

Genere-

<p>[Tab]

Risultato-

<p>
 |
</p>

dove |indica la posizione del cursore.

Spiegazione

inoremap significa creare la mappatura in modalità di inserimento
><Tab> indica una parentesi angolare di chiusura e un carattere di tabulazione; questo è ciò che è abbinato
><Esc> significa terminare il primo tag ed uscire dall'inserimento in modalità normale
F< significa trovare l'ultima parentesi angolare di apertura
l significa spostare il cursore di uno a destra (non copiare la parentesi angolare di apertura)
yt> significa trascinare dalla posizione del cursore fino a prima della successiva parentesi angolare di chiusura (cioè copiare i contenuti dei tag)
o</ significa iniziare una nuova riga in modalità di inserimento e aggiungere una parentesi angolare di apertura e una barra
<C-r>" significa incolla in modalità di inserimento dal registro predefinito ( ")
><Esc> significa chiudere il tag di chiusura ed uscire dalla modalità di inserimento
O<Space> significa iniziare una nuova riga in modalità di inserimento sopra il cursore e inserire uno spazio

— Keith Pinson
fonte

@wds Wow, sì, non ho mai pensato al fatto che lsignificasse "destra" e non "sinistra", haha ... che strano errore. Cosa ne pensi del mio post? Ho notato che non hai votato positivamente.

— Keith Pinson

Bello di sicuro. Recentemente ho iniziato a utilizzare il plugin xml.vim (funziona abbastanza bene). Suggerirei di aggiungerlo al tuo .vimrc con un comando automatico specifico del tipo di file, ad esempio:au filetype html inoremap <buffer> ...

— wds

1

Finalmente un comando Autoclose che funziona esattamente come dovrebbe - semplicemente!

— cnp

Mi piace mantenere il cursore tra i tag. Quindi l'ho modificato per soddisfare le mie esigenze. inoremap ><Tab> ><Esc>F<lyt>o</<C-r>"><Esc>kJxiRimuovo 0<Space>e ho aggiunto kJxi. Vai avanti di 1 livello, concatena due righe, rimuovi un carattere e vai in modalità di inserimento.

— Samundra

9

Check-out `vim-closetag`

È uno script molto semplice (disponibile anche come vundleplugin) che chiude (X) i tag HTML per te. Da esso README:

Se questo è il contenuto corrente:
<table|
Ora che premi >, il contenuto sarà:
<table>|</table>
E ora se premi di >nuovo, il contenuto sarà:
<table>
   |
</table>

Nota: |qui è il cursore

— Sheharyar
fonte

6

allml (ora Ragtag) e Omni-Completamento (<CX> <CO>) non funzionano in un file come .py o .java.

se vuoi chiudere automaticamente i tag in quei file, puoi mappare in questo modo.

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

(^ R è Contrl + R: puoi digitare in questo modo Control + ve poi Control + r)

(| è la posizione del cursore) ora se digiti ..

<P> ABCDE |

e digita ^ j

quindi chiude il tag in questo modo ..

<P> ABCDE </ p> |

— kimilhee
fonte

con imap <Cj> <ESC> mfF <lyt> `fa </ <CR>"> il tag di clonazione è dove si trovava il cursore quando hai digitato ^ j invece della fine della riga ($)

— Pietro

5

Ecco un'altra semplice soluzione basata su una scrittura Web facilmente reperibile:

Chiusura automatica di un tag HTML

:iabbrev </ </<C-X><C-O>
Attivazione del completamento

autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags

— mloskot
fonte

1

Risposta impressionante !!! senza plugin !!! (Il secondo elemento ha linkrot) forse ancora la migliore risposta di tutte, perché sembra più veloce modificare il .vimrc piuttosto che gestire i plugin. Inoltre la risposta più minimalista

— nilon

Questo aggiunge spazio dopo il tag chiuso :(

— Vitaly Zdanevich

4

Partendo dall'eccellente risposta di @KeithPinson (scusa, non ci sono ancora abbastanza punti reputazione per commentare la tua risposta), questa alternativa impedirà al completamento automatico di copiare qualsiasi cosa in più che potrebbe essere all'interno del tag html (ad esempio classi, id, ecc. .) ma non devono essere copiati nel tag di chiusura.

AGGIORNAMENTO Ho aggiornato la mia risposta per lavorare con i filename.html.erbfile.
Ho notato che la mia risposta originale non funzionava nei file comunemente usati nelle viste Rails, come some_file.html.erbquando stavo usando ruby incorporato (ad esempio <p>Year: <%= @year %><p>). Il codice qui sotto sarà lavorare con .html.erbi file.

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

Utilizzo del campione

Genere:

<div class="foo">[Tab]

Risultato:

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

dove |indica la posizione del cursore

E come esempio di aggiunta del tag di chiusura inline invece dello stile di blocco:

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

Utilizzo del campione

Genere:

<div class="foo">[Tab]

Risultato:

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

dove |indica la posizione del cursore

E 'vero che entrambi gli esempi di cui sopra si basano su >[Tab]per segnalare un tag di chiusura (nel senso che avrebbe dovuto scegliere sia in linea o stile di blocco). Personalmente, utilizzo lo stile blocco con >[Tab]e lo stile in linea con >>.

— Nick Erhardt
fonte

Come si possono chiudere rapidamente i tag HTML in Vim?

Mappatura

Utilizzo del campione

Spiegazione

Check-out vim-closetag

Check-out `vim-closetag`