salir guardar grabar editar editado cómo comandos cambios archivo html xml vim autocomplete

html - guardar - salir de vim ubuntu



¿Cómo se pueden cerrar etiquetas HTML en Vim rápidamente? (11)

Echa un vistazo a vim-closetag

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

Si este es el contenido actual:

<table|

Ahora presiona > , el contenido será:

<table>|</table>

Y ahora si presiona > nuevamente, el contenido será:

<table> | </table>

Nota: | es el cursor aquí

Ha pasado un tiempo desde que tuve que hacer un código tipo HTML en Vim , pero recientemente me encontré con esto de nuevo. Digamos que estoy escribiendo un simple HTML :

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

¿Cómo escribo rápidamente esas etiquetas de cierre para título, encabezado y html? Siento que me falta algo muy simple aquí que no me obliga a escribirlos uno por uno.

Por supuesto, puedo usar Ctrl P para autocompletar los nombres de las etiquetas individuales, pero lo que me pone en el teclado de mi laptop es obtener los corchetes y la barra derecha.

Cartografía

Me gusta tener mis etiquetas de bloque (en lugar de en línea) cerradas inmediatamente y con un atajo tan simple como sea posible (me gusta evitar las teclas especiales como CTRL siempre que sea posible, aunque uso closetag.vim para cerrar mis etiquetas en línea). me gusta usar este atajo cuando empiezo 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 la asignación en modo insertar
  • ><Tab> significa un paréntesis angulares de cierre y un carácter de tabulación; esto es lo que coincide
  • ><Esc> significa finalizar la primera etiqueta y escapar de la inserción en modo normal
  • F< significa encontrar el último ángulo de apertura
  • l significa mover el cursor a la derecha uno (no copiar el corchete del ángulo de apertura)
  • yt> significa pasar de la posición del cursor a la anterior hasta el próximo paréntesis angular de cierre (es decir, copiar el contenido de las etiquetas)
  • o</ significa que comienza una nueva línea en el modo de inserción y agrega un corchete de ángulo de apertura y una barra oblicua
  • <Cr>" significa pegar en modo insertar desde el registro predeterminado ( " )
  • ><Esc> significa cerrar la etiqueta de cierre y escapar del modo de inserción
  • O<Space> significa iniciar una nueva línea en el modo de inserción sobre el cursor e insertar un espacio

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

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

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 agregar la etiqueta de cierre en línea en lugar de 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] para señalar una etiqueta de cierre (lo que significa que tendría que elegir el estilo en línea o en bloque). Personalmente, utilizo el estilo de bloque con >[Tab] y el estilo en línea con >> .

Me gustan las cosas mínimas,

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

Me parece más conveniente hacer que vim escriba tanto la etiqueta de apertura como la de cierre, en lugar de solo la que cierra. Puede usar un excelente plugin de ragtag de Tim Pope. El uso se ve así (let | mark cursor position) que escribe:

span|

presione CTRL + x SPACE

y obtienes

<span>|</span>

También puede usar CTRL + x ENTRAR en lugar de CTRL + x ESPACIO , y obtiene

<span> | </span>

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

Me parece muy útil usar el plugin xmledit . agrega dos piezas de funcionalidad:

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

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

    <p>

    </p>

y coloca el cursor dentro de la etiqueta, sangría una vez, en modo insertar.

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

¡Por supuesto, no tiene que preocuparse por cerrar etiquetas si escribe su contenido HTML en Markdown y usa %! para filtrar tu buffer Vim a través del procesador Markdown que elijas :)

Si estás haciendo algo complicado, la sparkup es muy buena.

Un ejemplo de su sitio:

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

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

con un <Ce> .

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>

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

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

Actualización: 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> ---------------------

allml (ahora Ragtag) y Omni-completion (<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 <C-j> <ESC>F<lyt>$a</^R">

(^ R es Contrl + R: puede escribir como este Control + v y luego Control + r)

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

<p> abcde |

y escribe ^ j

entonces cierra la etiqueta como este ..

<p> abcde </ p> |