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

Por ejemplo, algo para cambiar:

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

<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:

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

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

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

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

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

No funciona para mi

— Derek 朕會功夫

Sí, hace un trabajo bastante bueno, pero finalmente comenzó a caer, en mi caso, <div>abriendo etiquetas.

— ruffin

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