¿Cómo se pueden cerrar rápidamente las etiquetas HTML en Vim?

117

Ha pasado un tiempo desde que tuve que hacer un código similar a HTML Vim, pero recientemente me encontré con esto nuevamente. Digamos que estoy escribiendo algo simple HTML:

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

¿Cómo escribo esas etiquetas de cierre para título, encabezado y html rápidamente? Siento que me estoy perdiendo una forma realmente simple aquí que no implica que tenga que escribirlas todas una por una.

Por supuesto que puedo usar CtrlPpara autocompletar los nombres de las etiquetas individuales, pero lo que me pone en el teclado de mi computadora portátil es en realidad obtener los corchetes y la barra oblicua.

html xml vim autocomplete wds
fuente

Respuestas:

38

Mira esto..

closetag.vim 

Functions and mappings to close open HTML/XML tags

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

Yo uso algo similar.

Ian P
fuente
He instalado esto. No completa la etiqueta de cierre automáticamente. ¿Qué es la tecla abreviada? Lo intento Ctrl-_, pero esto hace que mi terminal sea una fuente pequeña.
alhelal
74

Encuentro bastante útil el uso del complemento xmledit . agrega dos piezas de funcionalidad:

  1. Cuando se abre una etiqueta ( por ejemplo, tipo <p>), se expande la etiqueta tan pronto como se escribe el cierre >en <p></p>y coloca el cursor dentro de la etiqueta en el modo de inserción.

  2. Si luego inmediatamente escribe otro >( por ejemplo , escribe <p>>), se expande en

    <p>

    </p>

y coloca el cursor dentro de la etiqueta, sangrado una vez, en modo de inserción.

El complemento xml vim agrega código plegable y coincidencia de etiquetas anidadas a estas características.

Por supuesto, no tiene que preocuparse por cerrar etiquetas en absoluto si escribe su contenido HTML en Markdown y lo usa %!para filtrar su búfer Vim a través del procesador Markdown de su elección :)

hakamadare
fuente
¿Puede este complemento cerrar automáticamente las etiquetas cuando se escribe '</'? ¿O simplemente inserta la etiqueta de cierre con una pulsación de tecla? A veces, elimina la etiqueta de cierre y desea que se inserte después ...
bzx
7
No me gusta este complemento porque no proporciona una manera fácil de pasar el cursor de la etiqueta generada. Por ejemplo, si desea escribir "Que tenga un <b> lindo </b> día", comience escribiendo "Que tenga un <b> lindo", que se traduce como "Que tenga un <b> lindo </b> | </ b > ". A continuación, debe desplazarse con la flecha hacia la derecha o salir del modo de inserción para continuar con el resto de la oración. Por eso es mejor una solución en la que presione una tecla para insertar la etiqueta de cierre.
exclipy
1
@exclipy Vim tiene muchas formas integradas de hacer esto. Pruebe los comandos 'E', 'f' y 'A' para empezar.
user456584
3
Instalé el complemento xmledit con git clone https://github.com/sukima/xmledit.git ~/.vim/bundle/xmledit. Pero solo funciona al editar archivos .xml. Cuando el archivo ext es .html o .htm, no funciona.
Chad
2
@Chad actualmente, mi solución fue copiar y pegar el archivo en el mismo directorio exactamente renombrarlo a "html.vim" para que también afecte a los archivos HTML. Ahora, tengo dos archivos exactamente iguales en ~ / .vim / ftplugin (xml.vim y html.vim).
user2719875
56

Me gustan las cosas mínimas, 

imap ,/ </<C-X><C-O>
sjh
fuente
4
¿Qué hace <CX> <CO>? No hace nada por mí.
exclipy
8
Hay casos en los que a uno le gustaría escribir ", /", así que prefiero usar un atajo diferente. Otro detalle es que la omni-terminación debe cerrarse, sin esperar a recibir información adicional. Entonces:imap <silent> <C-c> </<C-X><C-O><C-X>
1
Muy genial. También se agregó <Esc>F<ial final de esto para que vuelva a colocar el cursor dentro de la etiqueta.
mVChr
para usar este comando, esté en modo de inserción, luego ,/
presione
La solución anterior tiene muchos votos positivos pero carece de explicación, especialmente para un principiante como yo. ¿Cómo funciona y cómo se usa?
Phemelo Khetho
49

Me parece más conveniente hacer que vim escriba tanto la etiqueta de apertura como la de cierre, en lugar de solo la de cierre. Puedes usar un excelente complemento ragtag de Tim Pope. El uso se ve así (deje | marcar la posición del cursor) que escribe:

lapso |

presione CTRL+x SPACE

y obtienes

<span> | </span>

También puede usar CTRL+ en x ENTERlugar de CTRL+x SPACE , y obtiene

<span>
|
</span>

Ragtag puede hacer más que solo eso (por ejemplo, insertar <% = cosas alrededor de este%> o DOCTYPE). Probablemente quieras ver otros complementos del autor de ragtag , especialmente surround .

Krzysiek Goj
fuente
+1 ¡Impresionante! Por cierto, esto ahora se conoce como ragtag: vim.org/scripts/script.php?script_id=1896
neezer
Este es definitivamente el más simple. Textmate lo tuvo bien, pero Vim lo supera con esto, gracias Krzysiek.
josemota
23

Si estás haciendo algo elaborado, la chispa es muy buena.

Un ejemplo de su sitio:

ul > li.item-$*3 se expande a:

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

con un <C-e>.

Para hacer el ejemplo dado en la pregunta, 

html > head > title{This is a title}

rendimientos

<html>
  <head>
    <title>This is a title</title>
  </head>
</html>
que estos
fuente
¡Muchas gracias! ¡Esto es más genial que cualquier cosa que haya visto antes, no solo Vim sino entre cualquier otro editor! ¡Súper!
Chris
Este es un gran complemento
DenniJensen
Este complemento evolucionó a partir de la codificación zen. Este último ahora se conoce como emmet y tiene un conjunto de funciones un poco más grande.
chb
17

También hay un complemento vim de codificación zen: https://github.com/mattn/zencoding-vim

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

Actualización: esto ahora se llama Emmet : http://emmet.io/

Un extracto 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>
  ---------------------
Preet Kukreti
fuente
Whoa, ¿es eso del creador de ruby?
tjklemz
13

Cartografía

Me gusta que mis etiquetas de bloque (en lugar de en línea) se cierren inmediatamente y con un atajo lo más simple posible (me gusta evitar las teclas especiales como CTRLsiempre que sea posible, aunque uso closetag.vimpara cerrar mis etiquetas en línea). Me gusta usar esto atajo al iniciar bloques de etiquetas (gracias a @kimilhee; este es un despegue de su respuesta):

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

Uso de muestra

Tipo-

<p>[Tab]

Resultado-

<p>
 |
</p>

donde |indica la posición del cursor.

Explicación

  • inoremap significa crear el mapeo en modo de inserción
  • ><Tab> significa un paréntesis de ángulo de cierre y un carácter de tabulación; esto es lo que se empareja
  • ><Esc> significa finalizar la primera etiqueta y salir de insertar en modo normal
  • F< significa encontrar el último ángulo de apertura
  • l significa mover el cursor a la derecha (no copiar el corchete de ángulo de apertura)
  • yt> significa tirar de la posición del cursor hacia arriba hasta antes del siguiente paréntesis angular de cierre (es decir, copiar el contenido de las etiquetas)
  • o</ significa comenzar una nueva línea en el modo de inserción y agregar un corchete de ángulo de apertura y una barra
  • <C-r>" significa pegar en modo de inserción desde el registro predeterminado ( ")
  • ><Esc> significa cerrar la etiqueta de cierre y salir del modo de inserción
  • O<Space> significa comenzar una nueva línea en el modo de inserción sobre el cursor e insertar un espacio
Keith Pinson
fuente
@wds Wow, sí, nunca pensé en el hecho de que lsignificaba "derecha" y no "izquierda", jaja ... qué gracioso error. ¿Qué te pareció mi publicación? Noté que no votaste a favor.
Keith Pinson
Bien seguro. He empezado a usar el complemento xml.vim recientemente (funciona bastante bien). Sugeriría agregarlo a su .vimrc con un autocomando específico de tipo de archivo, es decir:au filetype html inoremap <buffer> ...
wds
1
Finalmente, un comando de cierre automático que funciona exactamente como debería, ¡simplemente!
CNP
Me gusta mantener el cursor entre las etiquetas. Así que lo modifiqué para satisfacer mis necesidades. inoremap ><Tab> ><Esc>F<lyt>o</<C-r>"><Esc>kJxiQuito 0<Space>y agrego kJxi. Vaya 1 paso hacia arriba, concatenar dos líneas, eliminar un carácter y luego pasar al modo de inserción.
Samundra
9

Revisa vim-closetag

Es un script realmente simple (también disponible como vundlecomplemento) que cierra las etiquetas HTML (X) por usted. De es README:

Si este es el contenido actual:

<table|

Ahora presionas >, el contenido será:

<table>|</table>

Y ahora si vuelves a presionar >, el contenido será:

<table>
   |
</table>

Nota: ¿ |está el cursor aquí?

Sheharyar
fuente
6

allml (ahora Ragtag) y Omni-complete (<CX> <CO>) no funcionan en un archivo como .py o .java.

si desea cerrar la etiqueta automáticamente en esos archivos, puede mapear así.

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

(^ R es Contrl + R: puede escribir así Control + v y luego Control + r)

(| es la posición del cursor) ahora si escribe ..

<p> abcde |

y escribe ^ j

luego cierra la etiqueta así ...

<p> abcde </p> |

kimilhee
fuente
con imap <Cj> <ESC> mfF <lyt> `fa </ <CR>"> la etiqueta de clonación es donde estaba el cursor cuando escribiste ^ j en lugar del final de la línea ($)
Pietro
5

Aquí hay otra solución simple basada en escritura web fácilmente encontrable:

  1. Cierre automático de una etiqueta HTML

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

  2. Activando la finalización

    autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags

Mloskot
fuente
1
Respuesta impresionante !!! sin plugin !!! (El segundo elemento tiene linkrot) sigue siendo quizás la mejor respuesta de todas, porque parece más rápido modificar el .vimrc que manejar complementos. Además de la respuesta más minimalista
nilon
Esto agrega espacio después de la etiqueta cerrada :(
Vitaly Zdanevich
4

Partiendo de la excelente respuesta de @KeithPinson (lo siento, todavía no hay suficientes puntos de reputación para comentar su respuesta), esta alternativa evitará que el autocompletado copie cualquier cosa adicional que pueda estar dentro de la etiqueta html (por ejemplo, clases, identificadores, etc.) .) pero no debe copiarse en la etiqueta de cierre.

ACTUALIZAR He actualizado mi respuesta para trabajar con filename.html.erbarchivos.
Noté que mi respuesta original no funcionaba en archivos que se usan comúnmente en las vistas de Rails, como some_file.html.erbcuando estaba usando ruby ​​incrustado (por ejemplo <p>Year: <%= @year %><p>). El código siguiente será trabajar con .html.erbarchivos.

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

Uso de muestra

Tipo:

<div class="foo">[Tab]

Resultado:

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

donde |indica la posición del cursor

Y como ejemplo de cómo agregar la etiqueta de cierre en línea en lugar del estilo de bloque:

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

Uso de muestra

Tipo:

<div class="foo">[Tab]

Resultado:

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

donde |indica la posición del cursor

Es cierto que los dos ejemplos anteriores se basan en >[Tab]señalar una etiqueta de cierre (lo que significa que tendría que elegir ya sea en línea o estilo de bloque). Personalmente, uso el estilo de bloque con >[Tab]y el estilo en línea con >>.

Nick Erhardt
fuente