Existe um recurso de auto-indentação HTML ou plugin para Sublime Text (também conhecido como prettify / beautify / format)?

23

Por exemplo, algo para mudar:

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

para:

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

... que funciona em páginas inteiras e trechos.

  • A Edit > Line > Reindentconfiguração incorporada não faz isso
  • O plugin HTMLTidy adiciona heade bodytags, para que não funcione para parciais, mas também para vários outros problemas.
  • A tag do plugin tem vários problemas , o suficiente para que essencialmente não funcione
  • O plug-in HTMLPrettify tem vários problemas , requer node.js e não é atualizado há meses
  • gist.github.com/mcdonc/3898894 afirma fazer isso, mas requer o Emacs

(O Notepad ++ teve recuo automático, o Dreamweaver aplicou a formatação de origem, o Aptana possui o formato etc.)

O plug-in Tag manipula tags in-line incorretamente , por exemplo, usando-o neste snippet:

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

resulta em:

<p>
    foo
    <a>
        bar
        <span>
            baz
            <span>qux</span>
        </span>
    </a>
</p>
user110241
fonte
Qual é a pergunta? Não está claro em sua postagem qual é a pergunta.
Brad Patton
Título editado para ser interrogativo. Estou tentando encontrar uma maneira de recuar automaticamente o HTML no texto sublime.
user110241
Obrigado, tentei cada solução nesse segmento, nenhuma delas funciona. Eu listei as razões pelas quais muitos deles não funcionam neste segmento.
user110241
Eu acho que essa é a melhor solução de trabalho: jsbeautifier.org Eu tive o mesmo requisito de formatar várias tags embutidas. Este funciona muito bem. Ele também cria uma marcação adequada para texto sublime, o que pode fechar partes. Também está disponível na CLI como npmjs.com/package/js-beautify
Sai krishna Deep

Respostas:

18

O reindentnem sempre funciona para trechos. Você pode usar o Tagplug - in (instalar a partir do controle de pacotes). Depois, pressione ctrl+ shift+ pe digite tag. Você verá a opção Auto-Format tags on document. Selecione e pressione Enter. Isso fará.

Bibhas
fonte
1
Como mencionei no post original, o plug-in Tag está quebrado, principalmente no manuseio de tags inline, entre outros erros muito ruins. O autor disse que precisa "reescrever a coisa toda". O reindent não funciona realmente para HTML, não corrige o recuo; apenas alinha as tags a um determinado nível de recuo.
user110241
bem, Tag funcionou para mim. Eu usei seu snippet HTML. Funcionou na perfeição. E reindent funciona para HTML, mas sob algumas condições.
Bibhas
tente usar o formato automático de tag neste snippet: <p>foo<a>bar<span>baz<span>qux</span></span></a></p>para entender o que quero dizer. Ele também atrapalha a formatação da tag HTML de abertura envolvida nos comentários condicionais do IE que fazem parte do HTML5 Boilerplate (e comentários em geral). Tente usar o built-in Line > Reindentneste trecho: jsfiddle.net/y8xXj para ver como ele falha.
user110241
FYI - Tentei apenas no Sublime Text 3 com um snippet HTML e realmente funciona!
Steven
2
O mesmo problema. Eu usei inúmeros editores no passado, Coda, Sublime, Espresso, Chocolat, TextMate ... mas nenhum deles foi capaz de formatar perfeitamente o texto corretamente, como o Apply Source Formatting do Dreamweaver. Para o qual as pessoas simplesmente sugerem o Tidy ou outro plugin que nunca funciona como o Dreamweaver. Fico feliz que alguém "Zooted" veja esse problema. É lamentável que ainda não haja solução. No Sublime Text 3, como Zooted Noted, mesmo com Tag, ele não funciona corretamente (como no exemplo acima). E o recurso Reindent nativo é praticamente inútil.
26613 cchiera
6

Selecione Tudo -> menu Editar -> Linha -> Reindicar . Você pode definir uma combinação de atalhos para o mesmo uso.

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

Jasim Mahmood
fonte
1
Como mencionei na pergunta, isso não funciona. Experimente no primeiro trecho I, desde que: <section> <article> <h1> </ h1> <p> </ p> </ article> </ section>
user110241
Funciona para mim. Sintaxe definida para HTML?
Manuel Arwed Schmidt
2
Nao funciona para mim.
precisa
Sim, ele faz um bom trabalho, mas acabou caindo, no meu caso, <div>abrindo tags.
Ruffin
0

Para que o recurso Reindent funcione, desmarque a opção "Recuar usando espaços":

Exibir >> Recuo >> Recuo usando espaços

Depois de desmarcar esta opção, você pode selecionar seu texto e Reindent:

Editar >> Linha >> Reindent

Isso funcionará para sintaxe HTML e XML. Não testei em nenhum outro.

Sidz
fonte
Na verdade, eu já estava trabalhando com isso desmarcado. O comando que você mencionou não faz absolutamente nada para esse trecho em ST3:<html><head></head><body><div><p>foobar<span>baz</span></p></div></body></html>
user110241