¿Cómo ordeno la sangría de un archivo HTML en VI?

130

¿Cómo soluciono la sangría de sus enormes archivos html que estaban en mal estado?

Intenté el "gg=Gcomando habitual , que es lo que uso para arreglar la sangría de los archivos de código. Sin embargo, no parecía funcionar bien en archivos HTML. Simplemente eliminó todo el formato.

También intenté configurar :filetype = xml, para ver si engañarlo para que pensara que este era un archivo XML ayudaría, pero aún no lo hizo.

html vim vi indentation mmcdole
fuente

Respuestas:

91

Con filetype indent ondentro de mi .vimrc, Vim guiones archivos HTML bastante bien.

Ejemplo simple con un shiftwidthde 2:

<html>
  <body>
    <p>
    text
    </p>
  </body>
</html>
moinudin
fuente
15
Copie y pegue el html de esta página de preguntas en un archivo html. Abra con VIM, escriba "set smartindent", luego "gg = G" y no arregla la sangría del archivo.
mmcdole
15
Esto funciona para mi. set ft = html <cr> set si <cr> gg = G <cr>. Formatea esta página bastante bien.
Don Reba
55
+1 verificó que "filetype indent on / off" activa o desactiva la magia.
Wim Coenen
44
Sí, después de configurar la sangría inteligente, filetype = html, y la identificación del tipo de archivo funcionó para mí.
mmcdole
22
De chovy.com/web-development/fix-indentation-and-tabs-in-vim descubrí que necesitaba volver a cargar el archivo con: e después de la sangría del tipo de archivo.
Marc Stober
189

Hay varias cosas que todos necesitan estar en su lugar. Solo para resumirlos todos en una ubicación:

Establezca la siguiente opción:

:filetype indent on
:set filetype=html           # abbrev -  :set ft=html
:set smartindent             # abbrev -  :set si

Luego, mueva el cursor hacia la parte superior del archivo y aplique sangría hasta el final: gg =G
o seleccione el texto deseado para aplicar sangría y presione =para aplicar sangría.

tylerl
fuente
@tyrel, gracias, pero para mí no funciona. Este es el contenido del archivo: pastebin.com/gagia8W2 . El archivo se llama home.html. No tengo ningún problema para sangrar archivos .php. Aquí tienes mi .vimrc: pastebin.com/FAJ0MCA9
ziiweb
1
¿Hay alguna manera de configurar esto en .vimrc? No quiero decirlo cada vez que abro un archivo HTML que es un archivo HTML. Muchas gracias por gg, =, G atajo. Muy práctico
zakishaheen
1
Nótese que en vim 7.4el valor por defecto la configuración de sangrado se fallará en este ejemplo, como html, bodyy pno se aplica sangría por defecto. Mira esta respuesta .
Cory Klein
2
smartindentno es necesario También está ajustado para C y C ++, prefiero usar más general en su autoindentlugar.
Kos
Funciona muy bien con vim7.4. @tylerl ¿hay alguna manera de hacer esta configuración permanente para archivos html en 7.4?
xaph
62

El principal problema al usar la sangría inteligente es que si el XML (o HTML) se encuentra en una línea, ya que puede terminar regresando de una solicitud curl, entonces gg=Gno funcionará. En cambio, acabo de experimentar una buena sangría usando tidy directamente llamado desde VI:

:!tidy -mi -xml -wrap 0 %

Básicamente, esto le dice a VI que llame a tidy para limpiar un archivo XML que no ajuste las líneas para que quepan en las líneas predeterminadas de 68 caracteres de ancho. Procesé un gran archivo XML de 29 MB y tardó 5 o 6 segundos. Supongo que para un archivo HTML, el comando debería ser:

:!tidy -mi -html -wrap 0 %

Como se menciona en los comentarios, tidyes una herramienta básica que puede encontrar en muchos sistemas base Linux / MacOS. Aquí está la página del proyecto en caso de que desee tenerlo pero no lo haga: HTML Tidy .

oscaroscar
fuente
1
No creo que html sea necesario, ya que el valor predeterminado es html
lsiebert
44
De acuerdo contigo @Isieber. Sin embargo, supongo que facilita la comprensión de la lógica e incluso algunas personas podrían considerarla una buena práctica.
oscaroscar
2
FYI, ordena los choques si el HTML incluye SVG (por ejemplo, gráficos, etc.).
Alex Quinn el
1
Sí, si el código html está en una línea, ¡el comando vim indent no funcionará!
wisbucky
¿Qué es ordenado aparte de una palabra en un diccionario? Esta no es una respuesta completa sin vincular al proyecto.
Bruno Bronosky
49

Como tylerl explica anteriormente, configure lo siguiente:

:filetype indent on
:set filetype=html
:set smartindent

Sin embargo, nota que, en vim 7.4 las etiquetas HTML html, head, body, y algunos otros son no sangran por defecto. Esto tiene sentido, ya que casi todo el contenido en un archivo HTML cae bajo esas etiquetas. Si realmente quieres, puedes hacer que esas etiquetas se sangran así:

:let g:html_indent_inctags = "html,body,head,tbody"

Consulte "La sangría HTML no funciona en Vim 7.4 compilado, ¿alguna idea? " Y " Script alternativo de sangría html " para obtener más información.

Cory Klein
fuente
Este es el ganador en mi libro! ¡Usando Vim 7.4 en Windows y esto funciona fantásticamente! : D
Michael J
12

Esta es mi solución que funciona bien para abrir HTML "feo" de una manera bien espaciada:

vim fileIn.html -c "set sw=2 | %s/>/>\r/ | execute 'normal gg=G' | set nohlsearch | g/^\\s*\$/d"
  • El swcomando se debe a que mi valor predeterminado es 4, que es demasiado alto para HTML.
  • La siguiente parte agrega una nueva línea (Vim piensa que es un retorno de carro, suspiro) después de cada elemento ( >).
  • Luego vuelva a sangrar todo el archivo con =.
  • Luego, destaque >(ya que tengo set hlsearchen mi vimrc).
  • Luego, elimine todas las líneas vacías / de espacio en blanco solamente (consulte " Eliminar líneas en blanco de Vim " para obtener más información, también esto es de doble escape porque está en el shell).

Incluso puede agregar | wq! fileOut.htmlal final si no desea ingresar a Vim, pero simplemente limpie el archivo.

adam_0
fuente
Solución ordenada! Lo modifiqué en :%s/>\s*/>\r/g(agregué un greemplazo global y \s*para eliminar el espacio en blanco al final). También agregué :%s/</\r</gpara agregar una nueva línea antes del corchete abierto. De lo contrario, las etiquetas como <td>foo</td>se dividirían como <td>y foo</td>.
wisbucky
Punto justo, tengo el reemplazo global activado de forma predeterminada, por lo que no está en mi solución.
adam_0
7

Yo uso este script: https://github.com/maksimr/vim-jsbeautify

En el enlace de arriba tienes toda la información:

  1. Instalar en pc
  2. Configurar (copiar desde el primer ejemplo)
  3. correr :call HtmlBeautify()

¡Hace el trabajo maravillosamente!

SimonW
fuente
3
jaja, ¿por qué querrías + js uso de nodos a limpiar HTML en vim, que ha tenido esta capacidad incorporada por más tiempo que aún existe nodo ... perturba mi mente ..
MB21
4

¿Has intentado usar el script de sangría HTML en el sitio de Vim?

JaredPar
fuente
+1, no vi eso. Sería bueno si no necesitara ejecutar un script, pero parece que esta podría ser la única forma.
mmcdole
Este script está en desuso ahora, y una versión más nueva viene con vim (por ejemplo /usr/share/vim/vim74/indent/html.vim). "04 de julio de 2014: Vim 7.4.356 o posterior incluye un descendiente de este script (el script oficial ahora es mantenido por Bram e incluye cambios masivos)"
wisbucky
4

Aquí hay una solución de gran peso que le da sangría, además de todas las bonitas impresiones HTML que no necesariamente le interesan mientras está editando.

Primero, descarga Tidy . Asegúrese de agregar el binario a su ruta, para que pueda llamarlo desde cualquier ubicación.

A continuación, cree un archivo de configuración que describa su sabor HTML favorito. La documentación no es excelente para Tidy, pero aquí hay una descripción general y una lista de todas las opciones . Aquí está mi archivo de configuración:

bare: yes
break-before-br: no
clean: yes
drop-proprietary-attributes: yes
fix-uri: yes
indent-spaces: 4
indent: yes
logical-emphasis: yes
markup: yes
output-xhtml: yes
quiet: yes
quote-marks: yes
replace-color: yes
tab-size: 4
uppercase-tags: no
vertical-space: yes
word-2000: yes
wrap: 0

Guarda esto como tidyrc_html.txten tuftplugin carpeta (en vimfiles).

Un archivo más: agregue la siguiente línea a (o cree) html.vim, también en ftplugin:

map <leader>tidy :%! tidy -config ~/vimfiles/ftplugin/tidyrc_html.txt <CR>

Para usarlo, simplemente abra un archivo HTML y escriba /tidy. (Esa /es la<leader> clave).

Ahí tienes! No es una solución rápida, de ninguna manera, pero ahora estás un poco mejor equipado para editar esos enormes y desordenados archivos HTML.

Lémur
fuente
2

Puede integrar tidy y html-beautify automáticamente instalando el complemento vim-autoformat . Después de eso, puede ejecutar el formateador que esté instalado con una sola pulsación de tecla.

Chiel ten Brinke
fuente
0

Intenté el comando habitual "gg = G", que es lo que uso para arreglar la sangría de los archivos de código. Sin embargo, no parecía funcionar bien en archivos HTML. Simplemente eliminó todo el formato.

Si el autoformato / sangría de vim gg=G parece estar "roto" (como la sangría izquierda en cada línea), lo más probable es que el complemento de sangría no esté habilitado / cargado. Realmente debería dar un mensaje de error en lugar de simplemente hacer una sangría incorrecta, de lo contrario, los usuarios solo piensan que la función de autoformato / sangría es horrible, cuando en realidad es bastante buena.

Para verificar si el complemento de sangría está habilitado / cargado, ejecute :scriptnames. Ver si .../indent/html.vimestá en la lista. Si no, entonces eso significa que el complemento no está cargado. En ese caso, agregue esta línea a ~/.vimrc:

filetype plugin indent on

Ahora, si abre el archivo y lo ejecuta :scriptnames, debería ver .../indent/html.vim. Luego ejecute gg=G, que debería hacer el autoformato / sangría correcto ahora. (Aunque no agregará nuevas líneas, por lo que si todo el código html está en una sola línea, no se sangrará).

Nota: si está ejecutando :filetype plugin indent onen la línea de comando vim en lugar de ~/.vimrc, debe volver a abrir el archivo :e.

Además, usted no necesita preocuparse por autoindenty smartindentajustes, que no son relevantes para esto.

Wisbucky
fuente