¿Existe una característica o complemento de sangría automática de HTML para Sublime Text (también conocido como prettify / beautify / format)?

23

Por ejemplo, algo para cambiar:

<section><article><h1></h1><p></p></article></section>

a:

<section>
  <article>
    <h1></h1>
    <p></p>
  </article>
</section>

... que funciona en páginas completas y fragmentos.

  • La Edit > Line > Reindentconfiguración incorporada no hace esto
  • El complemento HTMLTidy agrega heady bodyetiqueta, por lo que no funciona para parciales, también tiene varios otros problemas
  • La etiqueta del complemento tiene varios problemas , lo suficiente como para que esencialmente no funcione
  • El complemento HTMLPrettify tiene varios problemas , requiere node.js y no se ha actualizado en meses
  • gist.github.com/mcdonc/3898894 dice hacerlo, pero requiere Emacs

(Notepad ++ tenía sangría automática, Dreamweaver tenía Aplicar formato de origen, Aptana tiene formato, etc.)

El complemento Etiqueta maneja las etiquetas en línea incorrectamente , por ejemplo, usándolo en este fragmento:

<p>foo<a>bar<span>baz<span>qux</span></span></a></p>

resultados en:

<p>
    foo
    <a>
        bar
        <span>
            baz
            <span>qux</span>
        </span>
    </a>
</p>
html sublime-text-2 autoindent usuario110241
fuente
¿Cuál es la pregunta? No está claro en tu publicación cuál es la pregunta.
Brad Patton
Título editado para ser interrogativo. Estoy tratando de encontrar alguna forma de auto-sangrar HTML en Sublime Text.
user110241
También vea Formatear código HTML usando Sublime Text 2 .
Karan
Gracias, probé cada solución en ese hilo, ninguno de ellos funciona. He enumerado las razones por las cuales muchas de ellas no funcionan en este hilo.
user110241
Creo que esta es la mejor solución de trabajo: jsbeautifier.org He tenido el mismo requisito de formatear múltiples etiquetas en línea. Este funciona muy bien. También crea un marcado adecuado para texto sublime que puede cerrar fragmentos. También está disponible en CLI como npmjs.com/package/js-beautify
Sai krishna Deep

Respuestas:

18

El reindentno siempre funciona para fragmentos. Puede usar el Tagcomplemento (instalar desde el control del paquete). Luego simplemente presione ctrl+ shift+ py escriba tag. Verás la opción Auto-Format tags on document. Selecciona y presiona Enter. Eso lo haremos.

Bibhas
fuente
1
Como mencioné en la publicación original, el complemento de etiqueta está roto, especialmente en el manejo de etiquetas en línea, entre otros errores muy malos. El autor ha dicho que necesita "reescribir todo". El reindent no funciona realmente para HTML, no corrige la sangría; solo alinea las etiquetas a un cierto nivel de sangría.
user110241
bueno, Tag funcionó para mí. Usé tu fragmento de HTML. Funcionó a la perfección. Y reindent funciona para HTML, pero bajo ciertas condiciones.
Bibhas
intente usar el autoformato de Tag en este fragmento: <p>foo<a>bar<span>baz<span>qux</span></span></a></p>para ver a qué me refiero. También desordena el formato de la etiqueta HTML de apertura envuelta en comentarios condicionales de IE que es parte de HTML5 Boilerplate (y comentarios en general). Intente usar el incorporado en Line > Reindenteste fragmento: jsfiddle.net/y8xXj para ver cómo falla.
user110241
FYI - ¡Acabo de probar en Sublime Text 3 con un fragmento de HTML y de hecho funciona!
Steven
2
Mismo problema. He usado innumerables editores en el pasado, Coda, Sublime, Espresso, Chocolat, TextMate ... pero ninguno ha sido capaz de formatear el texto correctamente como el Aplicar formato de origen de Dreamweaver. A lo que la gente simplemente sugiere Tidy o algún otro complemento que nunca funcione como Dreamweaver. Me alegra que alguien "Zooted" vea este problema. Es lamentable que todavía no haya solución. En Sublime Text 3 como Zooted Noted, incluso con Tag, no funciona correctamente (como en su ejemplo anterior). Y la característica nativa de Reindent es bastante inútil.
cchiera
6

Seleccione Todo -> Menú Editar -> Línea -> Reiniciar hará. Puede establecer una combinación de acceso directo para el mismo uso.

{"teclas": ["ctrl + shift + r"], "comando": "reindent", "args": {"single_line": false}}

Jasim Mahmood
fuente
1
Como mencioné en la pregunta, esto no funciona. Pruébelo en el primer fragmento que proporcioné: <section><article><h1></h1><p></p></article> </section>
user110241
Funciona para mi. ¿Sintaxis establecida en HTML?
Manuel Arwed Schmidt
2
No funciona para mi
Derek 朕 會 功夫
Sí, hace un trabajo bastante bueno, pero finalmente comenzó a caer, en mi caso, <div>abriendo etiquetas.
ruffin
0

Para que la función Reindent funcione, debe desmarcar la opción "Sangría usando espacios":

Ver >> Sangría >> Sangría usando espacios

Una vez que esta opción ha sido desmarcada, puede seleccionar su texto y Reindent:

Editar >> Línea >> Reindent

Esto funcionará para la sintaxis HTML y XML. No lo probé en ningún otro.

Sidz
fuente
En realidad ya estaba trabajando con eso sin marcar. El comando que mencionó no hace absolutamente nada a este fragmento en ST3:<html><head></head><body><div><p>foobar<span>baz</span></p></div></body></html>
user110241