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


1313

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?



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

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

Respuestas:


2080

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.


19
Por cierto, esto también funciona para el código fuente no HTML, como por ejemplo Ruby o JS
Peter

78
Esto funciona muy bien si el código no tiene múltiples etiquetas que se abren en una línea que no se cierran en una línea o viceversa.
Charlie Gorichanaz el

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

168
línea reindent absolutamente NO funciona para reformatear HTML arbitrario. como cuando hay varias etiquetas html sin saltos de línea. La respuesta HtmlTidy de @anneke es superior. Por lo que puedo decir, independientemente de los saltos de línea, reformatea completa y correctamente el código fuente html en una fuente muy bien sangrada.
jpw

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

375

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.


12
2nded en Prettify. La nueva sangría no funcionó en el html que tenía, no pude encontrar Tag y HtmlTidy no hizo nada cuando lo llamé.
jcollum

2
solo lo probé y HTML-CSS-JS Prettify funcionó en mi caso de uso idealmente (manejó la limpieza del html mucho mejor que los paquetes de reformateadores incorporados u otros)
Mark Essel

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

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

1
¿Funciona esto con extensiones no html? Traté de PHP y otras plantillas, no funcionó.
Bsienn

179

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.


21
un complemento mejor es Tidy HTML
MatthewFord

1
gracias ... ahora sabía sobre paquetes: D. Vi algunas cosas interesantes para el texto sublime aquí también. arlando.net/blog/…
mars-o

3
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!
justinhartman

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

@JonnyLeeds Lo hace, pero no siempre correctamente. Para XML específicamente, intente Indent XMLo IndentXentre otros.
Joel Mellon

49

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!


3
Necesita Node.js para usar ese complemento. No es muy cómodo para usuarios normales.
nikoskip

44
Comparando con la utilidad de este complemento, podemos ignorar el problema de instalar Node.js;)
Peter Zhu

Las instrucciones para instalar packagecontrol.io/packages/HTML-CSS-JS%20Prettify funcionaron muy bien. Gracias.
Sacky San

41

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


2
Me imagino que este complemento podría ser un poco intensivo en archivos grandes, lo que podría volverse lento si se ejecuta cada vez que presionas enter.
Rikki

2
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

22

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.



13

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


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

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

No funciona correctamente solo sangró / rompió la línea HTML hasta cierto nivel de sangría y dejó el resto sin sangría y en la misma línea.
Jonathan

11

Simplemente ve a

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


66
No veo esa opción de menú en Sublime Text 2 Version 2.0.1, Build 2217Mac. ¿Estás seguro de que es una característica estándar?
ostergaard

1
Tiene que instalar Tag desde el Administrador de paquetes. Pero tengo un problema con eso. Cuando <b>somthing</b>le sigue 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

9

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


3
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.
Sam

Supongo que estás usando Windows ... En Windows, debe reiniciar SublimeText 2 para que el script esté disponible. Intenta eso y avísame qué sucede. :)
Ross

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

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 lo esperaba, ¿tal vez es porque estoy ejecutando una versión alemana de Windows?
Sam

7

Creo que esto es lo que estás buscando:

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


Seguí las instrucciones pero no funcionó. El complemento me da errores. "'{' no se reconoce como un comando interno o externo, programa operativo 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 ignora el NPM y express
bgreater

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

7

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]--> 

7

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.


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

He encontrado que este es el único buen complemento ... y he probado casi todos.
shaneparsons

Parece que este tiene configuraciones para formatear atributos HTML. No veo ninguno de los otros complementos hacer eso? ¿O me estoy perdiendo uno?
Basil

4

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.


4

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

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

Ver detalle aquí .


66
Respuesta sin valor; Este es un duplicado de la respuesta aceptada.
Mark Amery
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.