para - ¿Cómo reformatear el código HTML usando Sublime Text 2?

paginas hechas con sublime text

Question

Tengo un código HTML mal formateado que me gustaría reformatear. ¿Hay algún 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?

Answer 1

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 su código ( ctrl + A ) y usar la funcionalidad de la aplicación, reindent ( Edit -> Line -> Reindent ) o puede usar el complemento de formato JsFormat para Sublime Text 2 si desea tener más configuraciones personalizables en cómo dar formato a su código para agregarlo a la configuración predeterminada de la pestaña / sangría del texto sublime.

https://github.com/jdc0589/JsFormat

Puede instalar fácilmente JsFormat con el control de paquetes ( Preferences -> Package Control ). Abra el control de paquetes y luego escriba instalar, presione enter . Luego escribe js format y pulsa enter , listo. (El controlador del 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 enlaces 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 como desees. Hasta ahora, JsFormat es un buen complemento, vale la pena probarlo.

Espero que esto ayude a alguien.

Answer 2

Creo que esto es lo que estás buscando:

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

Answer 3

El único paquete que he podido encontrar es Tag .

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

Después de instalar el control de paquetes. Vaya a control de paquetes ( Preferencias -> Control de paquetes ) y luego escriba install , presione enter . Luego escribe la tag y pulsa enter .

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

Answer 4

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

Tengo HTMLTidy.sublime-build en el directorio Paquetes / Usuario /:

{
  "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 o cmd + b para reformatear 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 (o a otra aplicación y viceversa).

En Mac, he usado 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 agregarlo al PATH.

Answer 5

Hay media docena de formas para formatear HTML en Sublime. He probado cada uno de los complementos más populares (vea el artículo que escribí en mi blog para obtener todos los detalles), pero aquí hay una descripción general 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 minificado, líneas con múltiples etiquetas abiertas
• No formatea correctamente los bloques <script>

Tag

Pros:

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

Contras:

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

HTMLTidy

Pros:

• Maneja etiquetas PHP
• Algunos ajustes para ajustar el formato

Contras:

• Requiere PHP (recae en el servicio web)
• Solo ST2
• ¿Abandonado?

HTMLBeautify

Pros:

• Soporta ST2 / ST3
• Dependencias simples y no binarias.
• Soporte para OS X, Win y Linux

Contras:

• Se ahoga un poco con los 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 en la opción de guardar

Contras:

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

¿Cuál es el mejor?

HTML-CSS-JS Prettify es el ganador de mi libro. Un montón de grandes características, no hay mucho de qué quejarse.

Answer 6

Hay un agradable github.com/akalongman/sublimetext-codeformatter código abierto de github.com/akalongman/sublimetext-codeformatter , que (a lo largo del proceso de reingreso) puede embellecer el código sucio, incluso si todo está en una sola línea.

Answer 7

Hay un complemento llamado SublimeHtmlTidy que funciona bastante bien

HTMLTidy

Answer 8

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

1. Necesitaba el Sublime Package Manager
2. Siga las instrucciones para instalar el administrador de paquetes here
3. tecleó cmd + shift + p para abrir el menú
4. Mecanografiado prettify
5. Elija la selección de HTML prettify en el menú.

Auge. Hecho. Se ve muy bien

Answer 9

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

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

¡Hecho!

Answer 10

Sólo 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 para Sublime, pero parece hacer lo que quiero :)

Answer 11

Simplemente ir a

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

Answer 12

Todavía no tengo el privilegio de comentar, por lo que esta es simplemente información adicional relacionada con la answer de answer antes mencionada.

Encontré que el HTML no se alineaba como se esperaba si los comentarios condicionales de IE en el encabezado no estuvieran 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]--> 

Answer 13

puede configurar la tecla de acceso directo F12 fácil !!!

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

Ver detalle here .

Answer 14

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

Compruébalo y déjame saber lo que piensas!

HTMLBeautify

Answer 15

No necesitas ningún plugin para hacer esto. Simplemente seleccione todas las líneas ( Ctrl A ) y luego, desde el menú, seleccione Editar → Línea → Reenviar. Esto funcionará si su archivo se guarda con una extensión que contiene HTML como .html o .php .

Si haces esto a menudo, puedes encontrar útil esta asignación de clave:

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

Si su archivo no está guardado (por ejemplo, acaba de pegar en un fragmento a 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 reingreso.