Come si possono chiudere rapidamente i tag HTML in Vim?

StackOverflow https://stackoverflow.com/questions/130734

  •  02-07-2019
  •  | 
  •  

Domanda

È passato un po 'di tempo da quando ho dovuto fare qualsiasi codice simile a HTML in Vim, ma recentemente mi sono imbattuto di nuovo in questo. Di 'che sto scrivendo alcuni semplici HTML: 

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

Come posso scrivere velocemente quei tag di chiusura per titolo, head e html? Sento che mi sto perdendo un modo molto semplice qui che non mi coinvolge a scriverli tutti uno per uno.

Ovviamente posso usare Ctrl P per completare automaticamente i nomi dei singoli tag, ma quello che mi dà sulla tastiera del mio laptop è effettivamente ottenere le parentesi e tagliare la barra a destra.

È stato utile?

Soluzione

Dai un'occhiata ..

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.

Altri suggerimenti

Trovo piuttosto utile usare il plug-in xmledit . aggiunge due funzionalità:

  1. Quando si apre un tag ( ad esempio digitare <p>), il tag si espande non appena si digita la chiusura > in <p></p> e posiziona il cursore all'interno del tag in insert modalità.

  2. Se poi digiti immediatamente un altro <p>> ( ad esempio digiti </p>), lo espande in

    %!

    <=>

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

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

Naturalmente, non devi preoccuparti di chiudere i tag se scrivi il tuo contenuto HTML in Markdown e usa <=> per filtrare il tuo buffer Vim attraverso il processore Markdown che preferisci :)

Mi piacciono le cose minime, 

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

Trovo più comodo fare in modo che Vim scriva sia il tag di apertura che quello di chiusura, anziché solo quello di chiusura. Puoi utilizzare l'eccellente plugin ragtag di Tim Pope. L'utilizzo è simile al seguente (lasciare | segnare la posizione del cursore) si digita: 

span|

premi CTRL + x SPACE

e ottieni 

<span>|</span>

Puoi anche usare CTRL + x ENTER invece di CTRL + x SPACE e ottieni 

<span>
|
</span>

Ragtag può fare molto di più (es. inserire <% = cose attorno a questo% > o DOCTYPE). Probabilmente vuoi controllare altri plugin di autore di ragtag , in particolare < a href = "http://www.vim.org/scripts/script.php?script_id=1697" rel = "noreferrer"> surround .

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

Un esempio dal loro sito:

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

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

con un <C-e>.

Per fare l'esempio fornito nella domanda, 

html > head > title{This is a title}

rendimenti 

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

Esiste anche un plug-in vim di zencoding: https://github.com/mattn/zencoding-vim

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

Aggiornamento: ora chiamato Emmet : http://emmet.io/

Un estratto del 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>
  ---------------------

Mapping

Mi piace avere i tag di blocco (anziché inline) chiusi immediatamente e con una scorciatoia il più semplice possibile (mi piace evitare i tasti speciali come CTRL dove possibile, anche se uso < => per chiudere i miei tag incorporati.) Mi piace usare questa scorciatoia all'avvio di blocchi di tag (grazie a @kimilhee; questo è un decollo della sua risposta): 

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

Utilizzo di esempio

&

Tipo # 8212; 

<p>[Tab]
&

Risultato # 8212; 

<p>
 |
</p>

dove closetag.vim indica la posizione del cursore.

Spiegazione

  • | significa creare la mappatura in modalità inserimento
  • inoremap significa parentesi angolari di chiusura e un carattere di tabulazione; questo è ciò che corrisponde
  • ><Tab> significa termina il primo tag e scappa dall'inserimento in modalità normale
  • ><Esc> significa trova l'ultima parentesi angolare di apertura
  • F< significa sposta il cursore verso destra (non copiare la parentesi angolare di apertura)
  • l significa yank dalla posizione del cursore verso l'alto fino a prima della parentesi angolare di chiusura successiva (ovvero copia del contenuto dei tag)
  • yt> significa iniziare una nuova linea in modalità inserimento e aggiungere una parentesi angolare di apertura e una barra
  • o</ significa incolla in modalità inserimento dal registro predefinito (<C-r>")
  • " significa chiudere il tag di chiusura ed uscire dalla modalità di inserimento
  • O<Space> significa iniziare una nuova riga in modalità inserimento sopra il cursore e inserire uno spazio

allml (ora Ragtag) e Omni-completamento (< C-X > < C-O >) non funziona in un file come .py o .java.

se desideri chiudere automaticamente il tag in tali file, puoi mappare in questo modo. 

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

(^ R è Contrl + R: puoi digitare come questo Control + v e quindi Control + r)

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

lt; p gt & &; ABCDE |

e digita ^ j

quindi chiude il tag in questo modo ..

lt; p gt; ABCDE lt; / p gt & & & &; |

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

  1. Chiusura automatica di un tag HTML

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

  2. Attivazione del completamento

    autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags

Scopri vim-closetag

È uno script davvero semplice (disponibile anche come vundle plug-in) che chiude i tag (X) HTML per te. Da è README:

  

Se questo è il contenuto corrente: 

<table|
     

Ora premi > , il contenuto sarà: 

<table>|</table>
     

E ora se premi di nuovo > , il contenuto sarà: 

<table>
   |
</table>

Nota: | è il cursore qui

Basandosi sull'ottima risposta di @KeithPinson (scusate, non abbastanza punti reputazione per commentare ancora la vostra 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 filename.html.erb file.
Ho notato che la mia risposta originale non funzionava nei file comunemente usati nelle viste Rails, come some_file.html.erb quando stavo usando il rubino incorporato (ad esempio <p>Year: <%= @year %><p>). Il codice sotto funzionerà con .html.erb file. 

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

Esempio di utilizzo

Tipo: 

<div class="foo">[Tab]

Risultato: 

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

dove | indica la posizione del cursore

E come esempio dell'aggiunta del tag di chiusura in linea anziché dello stile di blocco: 

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

Esempio di utilizzo

Tipo: 

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

Risultato:

<*>

dove >[Tab] indica la posizione del cursore

È vero che entrambi gli esempi precedenti si basano su >> per segnalare un tag di chiusura (il che significa che dovresti scegliere o in linea o stile blocco). Personalmente, utilizzo lo stile blocco con <=> e lo stile in linea con <=>.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top