¿Cómo reformateo el código HTML usando Sublime Text 2?

Tengo un código HTML mal formateado que me gustaría reformatear. ¿Existe un comando que reformatee automáticamente el código HTML en Sublime Text 2 para que se vea mejor y sea más fácil de leer?

No necesita ningún complemento para hacer esto. Simplemente seleccione todas las líneas ( Ctrl A) y luego en el menú seleccione Editar → Línea → Reindent. Esto funcionará si su archivo se guarda con una extensión que contiene HTML como .htmlo .php.

Si hace esto a menudo, puede encontrar útil esta asignación de teclas:

{ "keys": ["ctrl+shift+r"], "command": "reindent" , "args": { "single_line": false } }

Si su archivo no está guardado (p. Ej., Acaba de pegarlo en un fragmento en una nueva ventana), puede configurar manualmente el idioma para la sangría seleccionando el menú Ver → Sintaxis → language of choiceantes de seleccionar la opción reindent.

Hay media docena de formas de formatear HTML en Sublime. He probado cada uno de los complementos más populares (consulte la reseña que hice en mi blog para obtener más detalles), pero aquí hay una descripción general rápida de algunas de las opciones más populares:

Comando reindent

Pros:

• Se envía con Sublime, por lo que no es necesario instalar ningún complemento

Contras:

• No elimina líneas en blanco adicionales
• No puede manejar HTML minificado, líneas con múltiples etiquetas abiertas
• No formatea correctamente los <script>bloques

Etiqueta

Pros:

• Soporta ST2 / ST3
• Elimina líneas en blanco adicionales
• No dependencias binarias

Contras:

• Chokes en etiquetas PHP
• No maneja <script>bloques correctamente

HTMLTidy

Pros:

• Maneja etiquetas PHP
• Algunas configuraciones para ajustar el formato

Contras:

• Requiere PHP (recurre al servicio web)
• Solo ST2
• ¿Abandonado?

HTMLBeautify

Pros:

• Soporta ST2 / ST3
• Dependencias simples y sin binaray
• Soporte para OS X, Win y Linux

Contras:

• Se ahoga un poco con comentarios en línea
• Expande el código minimizado / comprimido

HTML-CSS-JS Prettify

Pros:

• Soporta ST2 / ST3
• Maneja HTML, CSS, JS
• Gran integración con los menús de Sublime.
• Altamente personalizable
• Configuraciones por proyecto
• Formato al guardar la opción

Contras:

• Requiere Node.js
• No es genial para PHP incrustado

¿Cuál es el mejor?

HTML-CSS-JS Prettify es el ganador en mi libro. Muchas características geniales, no hay mucho de qué quejarse.

El único paquete que he podido encontrar es Tag .

Puede instalarlo utilizando el control de paquete. https://sublime.wbond.net

Después de instalar el control del paquete. Vaya a control de paquetes ( Preferencias -> Control de paquetes ), luego escriba install, presione enter. Luego escribe tagy presiona enter.

Después de instalar Tag, resalte el texto y presione el acceso directo Ctrl+ Alt+ F.

Recomiendo este complemento: HTML / CSS / JS Prettify , realmente funciona.

Después de la instalación, simplemente seleccione el código y presione Ctrl+Shift+H.

¡Hecho!

Solo un consejo general. Lo que hice para ordenar automáticamente mi HTML, fue instalar el paquete HTML_Tidy, y luego agregar la siguiente combinación de teclas a la configuración predeterminada (que uso):

{ "keys": ["enter"], "command": "html_tidy" },

esto ejecuta HTML Tidy con cada entrada. Puede haber inconvenientes en esto, soy bastante nuevo en Sublime, pero parece hacer lo que quiero :)

Aunque la pregunta es para HTML, también me gustaría dar información sobre cómo formatear automáticamente su código Javascript para Sublime Text 2 ;

Puede seleccionar todo el código ( ctrl+ A) y utilizar la funcionalidad integrada en la aplicación, resangrar ( Edit-> Line-> Reindent) o puede utilizar el formato de plug-in para JsFormatSublime Text 2 si le gustaría tener una configuración más personalizables sobre cómo formatear el código de la adición a la pestaña predeterminada / configuración de sangría del texto sublime.

https://github.com/jdc0589/JsFormat

Se puede instalar fácilmente JsFormat con el uso de control de paquetes ( Preferences-> Package Control) de control del paquete abierto a continuación, tipo de instalación, golpeenter . Luego escribe js formaty presiona enter, ya está. (El controlador de paquete mostrará el estado de la instalación con éxito y errores en la barra inferior izquierda de Sublime)

Agregue la siguiente línea a sus combinaciones de teclas ( Preferences-> Key Bindings User)

{ "keys": ["ctrl+alt+2"], "command": "js_format"}

Estoy usando ctrl+ alt+ 2, puedes cambiar esta tecla de acceso directo lo que quieras. Hasta ahora, JsFormates un buen complemento, ¡vale la pena probarlo!

Espero que esto ayude a alguien.

Hay un complemento llamado SublimeHtmlTidy que funciona bastante bien

https://github.com/welovewordpress/SublimeHtmlTidy

Para mí, la HTML Prettifysolución fue extremadamente simple. Fui a la página HTML Prettify .

1. Necesitaba el Sublime Package Manager
2. Seguí las instrucciones para instalar el administrador de paquetes aquí
3. escrito cmd + shift + ppara que aparezca el menú
4. Mecanografiado prettify
5. Elige la HTML prettifyselección en el menú

Auge. Hecho. Se ve muy bien

Simplemente ve a

Editar -> Etiqueta -> Etiquetas con formato automático en el documento

Creé un paquete llamado HTMLBeautify que hace un trabajo decente de reformatear HTML. Lo basé en un script de Perl que encontré en 1997: lo actualicé para que funcione con todas las nuevas etiquetas modernas. :)

¡Compruébalo y hazme saber lo que piensas!

https://github.com/rareyman/HTMLBeautify

Creo que esto es lo que estás buscando:

https://github.com/victorporof/Sublime-HTMLPrettify

Todavía tengo el privilegio de comentar, así que esta es simplemente información adicional relacionada con la respuesta de @Peter arriba.

Descubrí que HTML no se alineaba como se esperaba si los comentarios condicionales de IE en el encabezado no estaban completamente en línea, por ejemplo, al ras de la izquierda:

<!--[if lt IE 7]>
<p class='chromeframe'>Your browser is <em>unsupported</em>. <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p>
<![endif]-->
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 

Hay un buen complemento de código abierto de CodeFormatter , que (junto con la nueva sangría ) puede embellecer el código sucio, incluso si todo está en una sola línea.

Estoy usando tidy junto con un sistema de compilación personalizado para embellecer HTML.

Tengo HTMLTidy.sublime-build en mi directorio Packages / User /:

{
  "cmd": ["tidy", "-config", "$packages/User/tidy_config.cfg", "$file"]
}

y el archivo tidy_config.cfg en el mismo directorio:

indent: auto
tab-size: 4
show-warnings: no
write-back: yes
quiet: yes
indent-cdata: yes
tidy-mark: no
wrap: 0

Y simplemente seleccione el sistema de compilación y presione ctrl+ bo cmd+b para volver a formatear el contenido del archivo. Un problema menor con eso es que ST2 no vuelve a cargar automáticamente el archivo, por lo que para ver los resultados, debe cambiar a otro archivo y viceversa (u otra aplicación y viceversa).

En Mac utilicé macports para instalar tidy, en Windows tendría que descargarlo usted mismo y especificar el directorio de trabajo en el sistema de compilación, donde se encuentra tidy:

"working_dir": "c:\\HTMLTidy\\"

o agréguelo a la RUTA.

¡Puede configurar la tecla de acceso directo F12fácil!

{ "keys": ["f12"], "command": "reindent" , "args": { "single_line": false } }

Ver detalle aquí .