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>
html sublime-text-2 autoindent 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
Consulte também Formatando código HTML usando o texto sublime 2 .
Karan
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