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




7 Answers

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.

html sublimetext2 sublimetext indentation reformat

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?




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!




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.




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




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







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

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

Ver detalle here .




Related