¿Cómo reformo el código HTML usando el texto sublime 2?

StackOverflow https://stackoverflow.com/questions/8839753

Pregunta

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

¿Fue útil?

Solución

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

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

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

Si su archivo no se guarda (por ejemplo, se acaba de pegar en un fragmento a una nueva ventana), puede establecer manualmente el idioma para la sangría seleccionando la vista del menú → Sintaxis → language of choice Antes de seleccionar la opción Reindent.

Otros consejos

Hay media docena de formas de formatear HTML en sublime. He probado cada uno de los complementos más populares (ver el Escritura que hice en mi blog Para detalles completos), pero aquí hay una descripción general de algunas de las opciones más populares:

Comando reindente

Pros:

  • Se envía con sublime, por lo que no se necesita instalación de complementos

Contras:

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

Etiqueta

Pros:

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

Contras:

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

Htmltidy

Pros:

  • Maneja etiquetas PHP
  • Algunas configuraciones para ajustar el formato

Contras:

  • Requiere PHP (vuelve al servicio web)
  • ST2 solo
  • ¿Abandonado?

Htmlbeautify

Pros:

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

Contras:

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

Html-css-js prettify

Pros:

  • Admite ST2/ST3
  • Maneja HTML, CSS, JS
  • Gran integración con los menús de Sublime
  • Altamente personalizable
  • Configuración por proyecto
  • Formato en la opción Guardar

Contras:

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

¿Cuál es el mejor?

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

El único paquete que he podido encontrar es Etiqueta.

Puede instalarlo utilizando el control del 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, pegar ingresar. Entonces escribe tag y golpear ingresar.

Después de instalar la etiqueta, resalte el texto y presione el atajo Control+Alternativo+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 hacer automáticamente mi HTML fue instalar el paquete html_tidy y luego agregar el siguiente control de teclas a la configuración predeterminada (que uso):

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

Esto ejecuta HTML ordenado con cada Enter. Puede haber inconvenientes en esto, soy bastante nuevo en sublime, pero parece hacer lo que quiero :)

Sin embargo, la pregunta es para HTML, también me gustaría dar información sobre cómo Formato automático de su código JavaScript para el texto sublime 2;

Puede seleccionar todo su código (control + A) y use la funcionalidad en la aplicación, Reindent (Edit -> Line -> Reindent) o puede usar el complemento de formato JSFormat para Sublime Text 2 Si desea tener una configuración más personalizable sobre cómo formatear su código para además de la configuración predeterminada de pestaña/sangría predeterminada del texto sublime.

https://github.com/jdc0589/jsformat

Puedes instalar fácilmente JSFORMAT con el uso de control del paquete (Preferences -> Package Control) Abra el control del paquete entonces Escriba la instalación, presione ingresar. Entonces escribe js format y golpear ingresar, ya has terminado. (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 control + alternativo + 2, puedes cambiar esta clave de acceso directo lo que quieras. Hasta aquí, JsFormat ¡Es 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 mi, el HTML Prettify La solución fue extremadamente simple. Fui al Página html prettify.

  1. Necesitaba el Sublime Package Manager
  2. Siguió las instrucciones para instalar el Administrador de paquetes aquí
  3. escrito CMD + Shift + P Para mencionar el menú
  4. Escrito prettify
  5. Eligió el HTML prettify selección en el menú

Auge. Hecho. Se ve muy bien

Simplemente ir a

Editar -> etiqueta -> etiquetas de formato automático en el documento

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

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

https://github.com/Rareyman/htmlbeautify

Todavía tengo que tener el privilegio de comentar, así que esta es simplemente información adicional relacionada con @Peter's responder RESPUESTA ARRIBA.

Encontré que HTML no se alineaba como se esperaba si IE comentarios condicionales En el encabezado no estaban completamente en línea, por ejemplo, al ras 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]-->

Hay un buen código abierto Complemento CodeFormatter, que (a lo largo de Reindenting) puede embellecer el código sucio, incluso todo está en una sola línea.

Creo que esto es lo que estás buscando:

https://github.com/victorporf/sublime-htmlprettify

Estoy usando ordenado junto con el sistema de compilación personalizado para prettificar HTML.

Tengo htmltidy.sublime-build en mis paquetes/ usuario/ directorio:

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

y 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 control+b o 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 que debe cambiar a algún otro archivo y retroceder (o otra aplicación y regreso).

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 agréguelo a la ruta.

puedes configurar la tecla de acceso directo F12 ¡¡¡fácil!!!

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

ver detalle aquí.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top