¿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?

preguntado el 12 de enero de 12 a las 13:01

Vea también stackoverflow.com/questions/9495007/… -

Además, si usa el modo Vintage, simplemente puede usar gg = G en modo normal. -

Puede perder el tiempo leyendo esta página completa, o simplemente puede obtener github.com/akalongman/sublimetext-codeformatter y volver al trabajo. -

16 Respuestas

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 .html or .php.

Si hace esto con frecuencia, puede encontrar útil esta asignación de claves:

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

Si su archivo no está guardado (por ejemplo, acaba de pegar un fragmento en una nueva ventana), puede configurar manualmente el idioma para la sangría seleccionando el menú Ver → Sintaxis → language of choice antes de seleccionar la opción de reindentrar.

Respondido 16 Jul 21, 20:07

Por cierto, esto también funciona para código fuente que no sea HTML, como, por ejemplo, Ruby o JS - peter

Esto funciona muy bien si el código no tiene varias etiquetas abiertas en una línea que no se cierran también en una línea o viceversa. - Charlie Gorichanaz

¡Perfecto! En mac, necesitas super para la tecla cmd, así que: {"keys": ["super + shift + r"], "command": "reindent", "args": {"single_line": false}} - Geert Weening

line reindent NO funciona en absoluto para reformatear HTML arbitrario. como cuando hay varias etiquetas html sin saltos de línea. La respuesta de HtmlTidy de @anneke es superior. Por lo que puedo decir, independientemente de los saltos de línea, reformatea completa y correctamente el html fuente en una fuente con sangría agradable. - jpw

Para los novatos, haga clic en "Preferencias", luego elija "Vinculación de teclas - Usuario", pegue el código de Peter entre los corchetes y guarde el archivo. - sigmapi13

Hay media docena de formas de formatear HTML en Sublime. Probé cada uno de los complementos más populares (consulte la artículo que hice en mi blog para obtener detalles completos), 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 las líneas en blanco adicionales
  • No se puede manejar HTML minimizado, líneas con múltiples etiquetas abiertas
  • No formatea correctamente <script> bloques

Etiqueta

Pros:

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

Contras:

  • Chokes en las etiquetas PHP
  • No maneja <script> bloquea correctamente

HTMLTidy

Pros:

  • Maneja etiquetas PHP
  • Algunas configuraciones para modificar el formato

Contras:

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

HTMLembellecer

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 embellecer

Pros:

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

Contras:

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

¿Cuál es el mejor?

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

Respondido 18 ago 15, 13:08

Terminado en Prettify. La re-sangría no funcionó en el html que tenía, no pude encontrar Tag y HtmlTidy no hizo nada cuando lo llamé. - jcollum

simplemente lo probé y HTML-CSS-JS Prettify funcionó en mi caso de uso idealmente (manejó la limpieza del html mucho mejor que el reindent u otros paquetes de reformateo integrados) - marca essel

Probé todos los demás, pero el único que funcionó (para un fragmento de HTML) fue HTML-CSS-JS Prettify. ¡Gracias! - Zumek

También quería mencionar que puede eliminar toda la sangría (una vez que se ha editado el marcado, por ejemplo) simplemente usando la funcionalidad incorporada de ST: seleccione el bloque y presione ctrl + j. - Zumek

¿Funciona esto con extensiones no html? Probé php y otras plantillas, no funcionó. - Abdul Rehman

El único paquete que he podido encontrar es Etiqueta.

Puede instalarlo usando el control de paquetes. https://sublime.wbond.net

Después de instalar el control de paquetes. Ir al control de paquetes (Preferencias -> Control de paquetes) luego escriba install, golpear entrar. Luego escribe tag y golpear entrar.

Después de instalar Tag, resalte el texto y presione el atajo Ctrl+otro+F.

respondido 14 nov., 17:22

un mejor complemento es Tidy HTML - MateoFord

gracias ... acabo de saber ahora acerca de los paquetes: D. También vi algunas cosas interesantes para texto sublime aquí. arlando.net/blog/… - marte

Honestamente, esto es lo único que funcionó perfectamente con algún código HTML que tenía cientos de saltos de línea aleatorios, etiquetas que estaban anidadas incorrectamente. ¡Básicamente limpió una de las páginas HTML más desordenadas que he visto en mi vida! - justinhartman

No estoy de acuerdo con @ mars-o; este complemento es genial. Tidy hace algunas cosas realmente bien y está muy bien establecido, pero este complemento hace algunas otras cosas interesantes. Gracias por la publicacion. - zedd45

@JonnyLeeds En cierto modo lo hace, pero no siempre correctamente. Para XML específicamente, intente Indent XML or IndentX entre otros. - joel mellón

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

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

¡Hecho!

Respondido 16 Jul 21, 20:07

Necesita Node.js para usar ese complemento. No muy cómodo para usuarios normales. - Nikoskip

En comparación con la utilidad de este complemento, podemos ignorar el problema de instalar Node.js;) - Pedro Zhu

Instrucciones para instalar packagecontrol.io/packages/HTML-CSS-JS%20Pretify funcionó muy bien. Gracias. - Sacky San

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 yo 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 :)

respondido 01 nov., 12:15

Me imagino que este complemento podría volverse un poco intensivo en archivos grandes, lo que podría volverse lento si se ejecuta cada vez que presiona Enter. - Rikki

Usé la combinación de teclas ENTER durante aproximadamente un día y luego la eliminé. era demasiado lento y seguía llevando el cursor a la parte superior de la pantalla en v2. - ravi ram

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

Puede seleccionar todo su código (CTRL+A) y use la funcionalidad de la aplicación, reindent (Edit -> Line -> Reindent) o puede utilizar el complemento de formato JsFormat para Sublime Text 2 si desea tener más configuraciones personalizables sobre cómo formatear su código para agregarlo a la configuración predeterminada de tabulación / sangría de Sublime Text.

https://github.com/jdc0589/JsFormat

Puede instalar fácilmente formato js con el uso de Package Control (Preferences -> Package Control) Abra el control de paquetes y luego escriba instalar, presione ENTRAR. Luego escribe js format y golpear ENTRAR, ya terminaste. (El controlador de paquetes 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, puede cambiar esta tecla de método abreviado como desee. Hasta aquí, JsFormat es un buen complemento, ¡vale la pena probarlo!

Espero que esto ayude a alguien.

Respondido 16 Jul 21, 20:07

Hay un complemento llamado SublimeHtmlTidy que funciona bastante bien

https://github.com/welovewordpress/SublimeHtmlTidy

Respondido el 08 de Septiembre de 12 a las 12:09

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

  1. Necesitaba el Sublime Package Manager
  2. Siguió las instrucciones para instalar el administrador de paquetes. aquí
  3. mecanografiado CMD+BASICO+P para abrir el menú
  4. Mecanografiado prettify
  5. Elige el HTML prettify selección en el menú

Auge. Hecho. Se ve muy bien

Respondido 16 Jul 21, 20:07

Esta solución funcionó exactamente como yo quería y toma casi 2 segundos si ya tiene el PM instalado. Es posible que desee agregar que necesita instalar el paquete prettify. - googlear

Nota: Para cualquier persona interesada, el complemento en esta respuesta requiere la instalación de node.js. - Nombre falso

No funciona correctamente; solo sangraba / saltaba la línea del HTML hasta un cierto nivel de sangría y dejaba el resto sin sangría y en la misma línea. - Jonathan

Simplemente vaya a

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

Respondido 09 Oct 12, 01:10

No veo esa opción de menú en Sublime Text 2 Version 2.0.1, Build 2217 en Mac. ¿Estás seguro de que es una función estándar? - Ostergaard

Tienes que instalar Tag desde el Administrador de paquetes. Pero tengo un problema con eso. Cuándo <b>somthing</b> va seguida de una coma, la coma se coloca en una nueva línea, lo que da como resultado un espacio entre algo y la coma en una vista del navegador. - reitermarkus

Creé un paquete llamado HTMLembellecer que hace un trabajo decente al 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 déjame saber lo que piensas!

https://github.com/rareyman/HTMLBeautify

Respondido el 21 de enero de 13 a las 18:01

Lo instalé pero cuando ejecuto HTMLBeautify en el archivo de demostración, no hace nada. Un mensaje Muestra que el archivo está embellecido, pero no sucede nada con el contenido del archivo. - Diana

¿Supongo que estás usando Windows…? En Windows, debe reiniciar SublimeText 2 para que el script esté disponible. Pruébelo y déjeme saber qué sucede. :) - Ross

Lo hice, el script estaba disponible, simplemente no cambió nada en el archivo. - Diana

Extraño. ¿Asumo que todos los demás complementos / paquetes funcionan normalmente? Parece que no puedo replicar este problema en mis entornos de prueba, por lo que no estoy seguro de qué decirle. :( - Ross

Además de formatear, todo funciona como esperaba, ¿tal vez sea porque estoy ejecutando una versión alemana de Windows? - Diana

Creo que esto es lo que estás buscando:

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

Respondido el 14 de enero de 12 a las 12:01

Seguí las instrucciones pero no funcionó. El complemento me da errores. "'{' no se reconoce como un comando interno o externo, programa operable o archivo por lotes". - ravi ram

Creo que ese paquete específico requiere la instalación de Node, lo cual es una tarea adicional ... dandean.com/nodejs-npm-express-osx ignore el NPM y exprese - bmayor

@Allan ¿Esto funciona en Windows? Tengo node.js instalado en mi computadora. - Anirudha Gupta

Todavía no tengo el privilegio de comentar, por lo que esta es simplemente información adicional relacionada con @ peter's https://www.youtube.com/watch?v=xB-eutXNUMXJtA&feature=youtu.be respuesta anterior.

Encontré que HTML no se alineó como se esperaba si IE comentarios condicionales en el encabezado no estaban completamente alineados, por ejemplo, alineados a 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]-->

contestado el 23 de mayo de 17 a las 13:05

Hay un buen código abierto Complemento CodeFormatter, que (junto con la reindentización) puede embellecer el código sucio incluso si todo está en una sola línea.

Respondido 23 Abr '14, 08:04

Nota: Esto requiere una instalación de PHP local. - Nombre falso

He descubierto que este es el , solamente buen complemento ... y los he probado casi todos. - shaneparsons

Parece que este tiene configuraciones para formatear atributos HTML. ¿No veo que ninguno de los otros complementos haga eso? ¿O me falta uno? - Basilio

Estoy usando ordenado junto con un sistema de construcció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+B or CMD+B para reformatear el contenido del archivo. Un problema menor con eso es que ST2 no recarga automáticamente el archivo, por lo que para ver los resultados, debe cambiar a otro archivo y regresar (o a otra aplicación y viceversa).

En Mac he usado macports para instalar tidy, en Windows tendrías que descargarlo tú 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.

Respondido 16 Jul 21, 20:07

puedes configurar la tecla de atajo F12 ¡¡¡fácil!!!

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

ver detalle aquí.

respondido 03 mar '17, 16:03

Respuesta inútil; este es un duplicado de la respuesta aceptada. - marca amery

HTML-CSS-JS embellecer - Sin duda el mejor.

  1. Instalar el control de paquetes
  2. ⌘ + desplazamiento a la izquierda + p (o ctrl + alt + desplazamiento a la izquierda + p) -> Control de paquete: Instalar paquete
  3. Ingrese HTML-CSS-JS Prettify
  4. Instalar nodo
  5. Reiniciar Sublime Text

¡A disfrutar!

Respondido 03 Feb 21, 20:02

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.