Como reformatar o código HTML usando o Sublime Text 2?

Eu tenho um código HTML mal formatado que gostaria de reformatar. Existe um comando que reformate automaticamente o código HTML no Sublime Text 2, para que fique melhor e mais fácil de ler?

Você não precisa de plugins para fazer isso. Basta selecionar todas as linhas ( Ctrl A) e, em seguida, no menu, selecione Editar → Linha → Reindent. Isso funcionará se o seu arquivo for salvo com uma extensão que contenha HTML como .htmlou .php.

Se você fizer isso com frequência, poderá achar útil esse mapeamento de chaves:

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

Se o seu arquivo não estiver salvo (por exemplo, você acabou de colar um trecho em uma nova janela), você pode definir manualmente o idioma para o recuo selecionando o menu Exibir → Sintaxe → language of choiceantes de selecionar a opção reindent.

Existem meia dúzia de maneiras de formatar o HTML no Sublime. Eu testei cada um dos plugins mais populares (veja a descrição que fiz no meu blog para obter detalhes completos), mas aqui está uma rápida visão geral de algumas das opções mais populares:

Comando reindent

Prós:

• É fornecido com o Sublime, portanto, não é necessário instalar o plugin

Contras:

• Não exclui linhas em branco extras
• Não é possível lidar com HTML reduzido, linhas com várias tags abertas
• Não formata corretamente os <script>blocos

Tag

Prós:

• Suporta ST2 / ST3
• Remove linhas em branco extras
• Sem dependências binárias

Contras:

• Engasga com tags PHP
• Não manipula <script>blocos corretamente

HTMLTidy

Prós:

• Manipula tags PHP
• Algumas configurações para ajustar a formatação

Contras:

• Requer PHP (volta ao serviço da web)
• Apenas ST2
• Abandonado?

HTMLBeautify

Prós:

• Suporta ST2 / ST3
• Dependências simples e sem binários
• Suporte para OS X, Win e Linux

Contras:

• Engasga um pouco com comentários embutidos
• Expande código minimizado / compactado

Prettify HTML-CSS-JS

Prós:

• Suporta ST2 / ST3
• Lida com HTML, CSS, JS
• Grande integração com os menus do Sublime
• Altamente personalizável
• Configurações por projeto
• Formatar ao salvar opção

Contras:

• Requer Node.js
• Não é bom para PHP incorporado

Qual é melhor?

O HTML-CSS-JS Prettify é o vencedor do meu livro. Muitos ótimos recursos, não há muito o que reclamar.

O único pacote que encontrei é o Tag .

Você pode instalá-lo usando o controle de pacote. https://sublime.wbond.net

Depois de instalar o controle do pacote. Vá para o controle de pacotes ( Preferências -> Controle de Pacotes ) e digite install, pressione enter. Então digite tage pressione enter.

Após instalar o Tag, destaque o texto e pressione o atalho Ctrl+ Alt+ F.

Eu recomendo este plugin: HTML / CSS / JS Prettify , ele realmente funciona.

Após a instalação, basta selecionar o código e pressionar Ctrl+Shift+H.

Feito!

Apenas uma dica geral. O que eu fiz para arrumar meu HTML automaticamente, foi instalar o pacote HTML_Tidy e adicionar a seguinte combinação de teclas às configurações padrão (que eu uso):

{ "keys": ["enter"], "command": "html_tidy" },

isso executa o HTML Tidy a cada entrada. Pode haver desvantagens nisso, sou bastante novo no Sublime, mas parece fazer o que eu quero :)

Embora a pergunta seja para HTML, também gostaria de fornecer informações sobre como formatar automaticamente seu código Javascript para o Sublime Text 2 ;

Você pode selecionar todo o seu código ( ctrl+ A) e usar a funcionalidade no aplicativo, reindent ( Edit-> Line-> Reindent) ou pode usar o plugin de formatação JsFormat paraSublime Text 2 se desejar ter configurações mais personalizáveis ​​sobre como formatar seu código, além de as configurações padrão da guia / recuo do texto sublime.

https://github.com/jdc0589/JsFormat

Você pode instalar facilmente o JsFormat usando o Controle de Pacotes ( Preferences-> Package Control) Abra o controle de pacotes e digite install, hitenter . Em seguida, digite js formate aperte enter, pronto. (O controlador do pacote mostrará o status da instalação com êxito e erros na barra inferior esquerda daSublime )

Adicione a seguinte linha às suas combinações de teclas ( Preferences-> Key Bindings User)

{ "keys": ["ctrl+alt+2"], "command": "js_format"}

Estou usando ctrl+ alt+ 2, você pode alterar essa tecla de atalho da maneira que quiser. Tão longe,JsFormat é um bom plugin, vale a pena experimentá-lo!

Espero que isso ajude alguém.

Existe um plugin chamado SublimeHtmlTidy que funciona muito bem

https://github.com/welovewordpress/SublimeHtmlTidy

Para mim, a HTML Prettifysolução foi extremamente simples. Eu fui para a página HTML Prettify .

1. Precisava do Sublime Package Manager
2. Siga as instruções para instalar o gerenciador de pacotes aqui
3. digitado cmd + shift + ppara abrir o menu
4. Digitado prettify
5. Escolha a HTML prettifyseleção no menu

Estrondo. Feito. Parece ótimo

Basta ir para

Editar -> Tag -> Tags de formatação automática no documento

Eu criei um pacote chamado HTMLBeautify que faz um trabalho decente de reformatar o HTML. Baseei-o em um script Perl que encontrei em 1997 - atualizei-o para trabalhar com todas as novas e modernas tags modernas. :)

Confira e deixe-me saber o que você pensa!

https://github.com/rareyman/HTMLBeautify

Eu acho que é isso que você está procurando:

https://github.com/victorporof/Sublime-HTMLPrettify

Ainda tenho o privilégio de comentar, portanto, são simplesmente informações adicionais relacionadas à resposta de @ Peter acima da resposta.

Descobri que o HTML não estava alinhado como esperado se os comentários condicionais do IE no cabeçalho não estivessem completamente alinhados, por exemplo, nivelados à esquerda:

<!--[if lt IE 7]>
<p class='chromeframe'>Your browser is <em>unsupported</em>. <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p>
<![endif]-->
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 

Existe um bom plugin de código aberto CodeFormatter , que (junto com a reindentação) pode embelezar o código sujo, mesmo que tudo esteja em uma única linha.

Estou usando arrumado junto com o sistema de compilação personalizado para prettificar HTML.

Eu tenho HTMLTidy.sublime-build no meu diretório Packages / User /:

{
  "cmd": ["tidy", "-config", "$packages/User/tidy_config.cfg", "$file"]
}

e tidy_config.cfg no mesmo diretório:

indent: auto
tab-size: 4
show-warnings: no
write-back: yes
quiet: yes
indent-cdata: yes
tidy-mark: no
wrap: 0

E selecione o sistema de compilação e pressione ctrl+ bou cmd+b para reformatar o conteúdo do arquivo. Um pequeno problema é que o ST2 não recarrega automaticamente o arquivo. Para ver os resultados, é necessário alternar para outro arquivo e voltar (ou para outro aplicativo e voltar).

No Mac, usei o macports para instalar o arrumado, no Windows você teria que fazer o download e especificar o diretório de trabalho no sistema de compilação, onde o arrumado está localizado:

"working_dir": "c:\\HTMLTidy\\"

ou adicione-o ao PATH.

você pode definir a tecla de atalho F12fácil !!!

{ "keys": ["f12"], "command": "reindent" , "args": { "single_line": false } }

veja detalhes aqui .