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

1313

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?

Ravi Ram
fonte
4
Veja também stackoverflow.com/questions/9495007/…
Kristopher Johnson
1
Além disso, se você usar o modo Vintage, poderá simplesmente usar gg = G no modo normal.
Wiktor Mociun
3
Você pode perder seu tempo lendo esta página inteira ou pode simplesmente acessar o github.com/akalongman/sublimetext-codeformatter e voltar ao trabalho.
shaneparsons

Respostas:

2080

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.

Pedro
fonte
19
By the way, isso funciona para código não HTML também, como por exemplo, Ruby ou JS
peter
78
Isso funciona muito bem se o código não possui várias tags abertas em uma linha que também não fecham em uma linha ou vice-versa.
9788 Charlie Angichanaz #
31
Perfeito! No mac, você precisa de super para a tecla cmd, portanto: {"keys": ["super + shift + r"], "command": "reindent", "args": {"single_line": false}}
Geert Weening
168
O reindent de linha NÃO funciona absolutamente para reformatar o HTML arbitrário. como quando existem várias tags html sem quebras de linha. A resposta HtmlTidy de @anneke é superior. Até onde eu sei, independentemente de quebras de linha, ele reformata completa e adequadamente o html da fonte em uma fonte bem recuada.
jpw
33
Para iniciantes, clique em "Preferências", escolha "Vinculação de teclas - Usuário" e cole o código de Peter entre colchetes e salve o arquivo.
sigmapi13
375

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.

Josh Earl
fonte
12
2º lugar no Prettify. O re-recuo não funcionou no html que eu tinha, não foi possível encontrar o Tag e o HtmlTidy não fez nada quando o chamei.
Jcollum # 03
2
apenas tentei sair e HTML-CSS-JS Prettify trabalhou em meu caso de uso ideal (tratado limpando o html muito melhor do que o construído em reindent ou outros pacotes reformatador)
Mark Essel
2
Tentei todos os outros, mas o único que funcionou (para um trecho de HTML) foi o HTML-CSS-JS Prettify. Obrigado!
Zumek
1
Também gostaria de mencionar que você pode remover todo o recuo (depois que a marcação foi editada, por exemplo) simplesmente usando a funcionalidade incorporada do ST - selecione o bloco e pressione ctrl + j.
Zumek
1
Isso funciona com extensões não html? Eu tentei em php e outros modelos, ele não funcionou.
Bsienn 16/07/2015
179

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.

dardub
fonte
21
um plugin melhor é o HTML arrumado
MatthewFord 21/12
1
obrigado ... só sabia agora sobre pacotes: D. vi algumas coisas legais para texto sublime aqui também. arlando.net/blog/…
mars-o
3
Sinceramente, é a única coisa que funcionou perfeitamente com algum código HTML que possui centenas de quebras de linha aleatórias, tags que foram aninhadas incorretamente. Ele basicamente limpou uma das páginas HTML mais confusas que eu já vi!
precisa
1
Não concordo com @ mars-o; este plugin é ótimo. O Tidy faz algumas coisas muito bem e é muito estabelecido, mas este plugin faz outras coisas interessantes. Obrigado pelo post.
Zedd45
@JonnyLeeds É o que acontece, mas nem sempre corretamente. Para XML especificamente, tente Indent XMLou IndentXentre outros.
Joel Mellon
49

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!

Peter Zhu
fonte
3
Você precisa do Node.js para usar esse plugin. Não é muito confortável para usuários normais.
Nikoskip 03/03
4
Comparando com a utilidade deste plugin, podemos ignorar o problema de instalar Node.js;)
Peter Zhu
As instruções para instalar o packagecontrol.io/packages/HTML-CSS-JS%20Prettify funcionaram muito bem. obrigado.
Sacky San
41

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

Anneke
fonte
2
Eu imagino que esse plug-in pode se tornar um pouco intensivo em arquivos grandes, que podem ficar lentos se for executado toda vez que você pressionar Enter?
Rikki
2
Eu usei a tecla ENTER por cerca de um dia e depois a removi. estava muito lento e continuava levando o cursor para o topo da tela na v2.
Ravi Ram
22

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.

Gokhan Tank
fonte
13

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

insaineyesay
fonte
Essa solução funcionou exatamente como eu queria e leva apenas 2 segundos, se você já tiver o PM instalado. Pode querer adicionar que você precisa instalar o pacote de prettificação.
doogle
Nota: Para qualquer pessoa interessada, o plug-in nesta resposta requer a instalação do node.js.
Nome falso
Não funciona corretamente; apenas o recuo / quebra de linha violou o HTML até um certo nível de recuo e deixou o restante sem recuo e na mesma linha.
Jonathan
11

Basta ir para

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

Ricardo Martins
fonte
6
Não vejo essa opção de menu Sublime Text 2 Version 2.0.1, Build 2217no Mac. Tem certeza de que é um recurso padrão?
Ostergaard
1
Você precisa instalar o Tag no Gerenciador de Pacotes. Mas eu tenho um problema com isso. Quando <b>somthing</b>é seguida por uma vírgula, a vírgula é colocada em uma nova linha, resultando em um espaço entre algo e a vírgula em uma visualização do navegador.
Reitermarkus
9

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

Ross
fonte
3
Eu instalei, mas quando executo o HTMLBeautify no arquivo de demonstração, ele não faz nada. Uma mensagem Exibe que o arquivo foi embelezado, mas nada acontece com o arquivo Conteúdo.
Sam
Meu palpite é que você está usando o Windows ...? No Windows, você precisa reiniciar o SublimeText 2 para que o script esteja disponível. Tente isso e deixe-me saber o que acontece. :)
Ross
Eu fiz, o script estava disponível, apenas não mudou nada no arquivo.
Sam
Estranho. Estou assumindo que todos os outros plugins / pacotes funcionam normalmente? Parece que não consigo replicar esse problema nos meus ambientes de teste - por isso não tenho certeza do que lhe dizer. :
Ross
Além de formatar, tudo funciona como eu esperava - talvez seja porque eu esteja executando uma versão em alemão do Windows?
Sam
7

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

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

Allen Bargi
fonte
Eu segui as instruções, mas não funcionou. O plugin me dá erros. "'{' não é reconhecido como um comando interno ou externo, programa operável ou arquivo em lote."
Ravi Ram
Acredito que pacote específico requer nó a ser instalado que é uma empresa adicional ... dandean.com/nodejs-npm-express-osx desrespeito do NPM e expressar
bgreater
@ Allan Isso funciona no Windows. Eu tenho o node.js instalado no meu computador.
Anirudha Gupta 01/10/12
7

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]--> 
newtriks
fonte
7

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.

side2k
fonte
Nota: Isso requer uma instalação local do PHP.
Fake Name
Eu descobri que este é o único bom plugin .. e eu tentei quase todos eles.
shaneparsons
Parece que este possui configurações para formatar atributos HTML. Não vejo nenhum dos outros plugins fazendo isso? Ou estou sentindo falta de um?
Basil
4

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.

rchl
fonte
4

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

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

veja detalhes aqui .

Sumeta Pongpanna
fonte
6
Resposta inútil; esta é uma duplicata da resposta aceita.
Mark Amery