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


Tengo un código HTML mal formateado que me gustaría reformatear. ¿Hay algún comando que vuelva a formatear automáticamente el código HTML en Sublime Text 2 para que se vea mejor y sea más fácil de leer?


1178
2018-01-12 17:49


origen


Respuestas:


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

Si lo hace a menudo, puede encontrar útil este mapeo de claves:

{ "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 indentación seleccionando el menú Ver → Sintaxis → language of choice antes de seleccionar la opción reindent.


1927
2018-06-04 21:47



Hay media docena de formas de formatear HTML en Sublime. He probado cada uno de los complementos más populares (ver writeup que hice en mi blog para 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 un complemento

Contras:

  • No elimina líneas en blanco adicionales
  • No 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:

  • Choques en 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)
  • Sólo ST2
  • ¿Abandonado?

HTMLBeautify

Pros:

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

Contras:

  • Ahoga un poco con comentarios en línea
  • ¿Amplía 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
  • Configuraciones por proyecto
  • Formato en la opción guardar

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 características excelentes, no hay mucho de lo que quejarse.


351
2018-01-18 16:29



El único paquete que he podido encontrar es Etiqueta.

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

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

Después de instalar Tag, resalta el texto y presiona el atajo Ctrl+Alt+F.


172
2018-01-13 23:12



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!


45
2018-01-07 03:22



Solo un consejo general. Lo que hice para organizar 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 :)


38
2017-11-01 15:17



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 + UN) y usar la funcionalidad en la aplicación, reindent (Edit -> Line -> Reindent) o puede usar el plugin 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 de tabulación / sangría predeterminada del Texto Sublime.

https://github.com/jdc0589/JsFormat

Puedes instalarlo fácilmente JsFormat con el uso de Control de paquetes (Preferences -> Package Control) Abra el control del paquete y luego tipo instalar, golpear entrar. Luego escribe js format y golpear entrar, 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 ctrl + alt + 2, puede cambiar esta tecla de acceso directo como lo desee. Hasta aquí, JsFormat es un buen complemento, vale la pena probarlo!

Espero que esto ayude a alguien.


20
2018-06-24 11:34



Hay un complemento llamado SublimeHtmlTidy que funciona bastante bien

https://github.com/welovewordpress/SublimeHtmlTidy


11
2017-09-08 11:00



Simplemente ve a

Editar -> Etiqueta -> Auto-formatear etiquetas en el documento


9
2017-10-09 00:23



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

  1. Necesitaba el Sublime Package Manager
  2. Siguió las instrucciones para instalar el administrador de paquetes aquí
  3. mecanografiado cmd + shift + p para que aparezca el menú
  4. Mecanografiado prettify
  5. Eligió el HTML prettify selección en el menú

Auge. Hecho. Se ve muy bien


9
2017-07-27 16:01