Como faço para arrumar a indentação de um arquivo HTML no VI?

130

Como faço para corrigir o recuo de seus enormes arquivos html que estavam todos bagunçados?

Eu tentei o "gg=Gcomando usual , que é o que eu uso para corrigir o recuo dos arquivos de código. No entanto, não parecia funcionar direito em arquivos HTML. Ele simplesmente removeu toda a formatação.

Eu também tentei configurar :filetype = xml, para ver se enganá-lo pensando que este era um arquivo XML ajudaria, mas ainda não o fez.

html vim vi indentation mmcdole
fonte

Respostas:

91

Com o filetype indent onmeu .vimrc, o Vim identifica bem os arquivos HTML.

Exemplo simples com um shiftwidthde 2:

<html>
  <body>
    <p>
    text
    </p>
  </body>
</html>
moinudin
fonte
15
Copie e cole o html desta página de perguntas em um arquivo html. Abra com o VIM, digite "set smartindent", depois "gg = G" e ele não corrige o recuo do arquivo.
Mmcdole #
15
Funciona para mim. definir ft = html <cr> definir si <cr> gg = G <cr>. Formata esta página muito bem.
222 Don Reba
5
O +1 verificou que "recuo do tipo de arquivo ativado / desativado" ativa ou desativa a mágica.
Wim Coenen
4
Sim, depois de definir o recuo inteligente, tipo de arquivo = html e ident de tipo de arquivo funcionou para mim.
Mmcdole #
22
Em chovy.com/web-development/fix-indentation-and-tabs-in-vim, descobri que eu precisava recarregar o arquivo com: e depois do recuo do tipo de arquivo.
Marc Stober
189

Há várias coisas que todos precisam estar no lugar. Apenas para resumir todos eles em um local:

Defina a seguinte opção:

:filetype indent on
:set filetype=html           # abbrev -  :set ft=html
:set smartindent             # abbrev -  :set si

Em seguida, mova o cursor para a parte superior do arquivo e recue até o final: gg =G
ou selecione o texto desejado para recuar e pressione =para recuar.

tylerl
fonte
@tyrel, obrigado, mas para mim não está funcionando .. Este é o conteúdo do arquivo: pastebin.com/gagia8W2 . O arquivo é chamado home.html. Não tenho nenhum problema para recuar arquivos .php. Aqui está o meu .vimrc: pastebin.com/FAJ0MCA9
ziiweb
1
Existe uma maneira de definir isso no .vimrc? Não quero contar toda vez que abro um arquivo HTML que é um arquivo HTML. Muito obrigado pelo atalho gg, =, G. Realmente útil.
Zakishaheen
1
Note-se que vim 7.4no padrão configurações de recuo vai falhar para este exemplo, como html, bodye pnão são recuados por padrão. Veja esta resposta .
Cory Klein
2
smartindentnão é necessário. Também é ajustado para C e C ++, prefiro usar mais geral autoindent.
Kos
Funciona muito bem com o vim7.4. @tylerl existe alguma maneira de tornar essa configuração permanente para arquivos html na 7.4?
Xaph
62

O principal problema ao usar o recuo inteligente é que, se o XML (ou HTML) estiver em uma linha, pois pode acabar voltando de uma solicitação de curvatura, gg=Gnão será possível. Em vez disso, experimentei apenas um bom recuo usando arrumado chamado diretamente do VI:

:!tidy -mi -xml -wrap 0 %

Isso basicamente diz ao VI para arrumar a limpeza de um arquivo XML que não quebra as linhas para ajustá-las às linhas largas padrão de 68 caracteres. Eu processei um arquivo XML grande de 29 MB e levou 5 ou 6 segundos. Eu acho que, para um arquivo HTML, o comando deve ser:

:!tidy -mi -html -wrap 0 %

Como mencionado nos comentários, tidyé uma ferramenta básica que você pode encontrar em muitos sistemas Linux / MacOS básicos. Aqui está a página do projeto, caso você deseje, mas não possui: HTML Tidy .

oscaroscar
fonte
1
Eu não acredito que html é necessário, como o padrão para html
lsiebert
4
Concordo com você @Isieber. No entanto, acho que facilita a compreensão da lógica e pode até ser considerado uma boa prática para algumas pessoas.
oscaroscar
2
Para sua informação, arrume se o HTML inclui SVG (por exemplo, gráficos, etc.).
Alex Quinn
1
Sim, se o código html estiver em uma linha, o comando vim indent não funcionará!
wisbucky
O que é arrumado além de uma palavra em um dicionário? Esta não é uma resposta completa sem vincular ao projeto.
Bruno Brosky
49

Como tylerl explica acima, defina o seguinte:

:filetype indent on
:set filetype=html
:set smartindent

No entanto, nota que no vim 7.4 as tags HTML html, head, body, e alguns outros são não recortado por padrão. Isso faz sentido, pois quase todo o conteúdo de um arquivo HTML se enquadra nessas tags. Se você realmente quiser, pode fazer com que essas tags sejam recuadas da seguinte forma:

:let g:html_indent_inctags = "html,body,head,tbody"

Consulte " Recuo em HTML não funciona no Vim 7.4 compilado, alguma idéia? " E " script de indent html alternativo " para obter mais informações.

Cory Klein
fonte
este é o vencedor no meu livro! Usando o Vim 7.4 no Windows e isso funciona de maneira fantástica! : D
Michael J
12

Esta é a minha solução que funciona bem para abrir HTML "feio" de uma maneira bem espaçada:

vim fileIn.html -c "set sw=2 | %s/>/>\r/ | execute 'normal gg=G' | set nohlsearch | g/^\\s*\$/d"
  • o sw comando é porque meu padrão é 4, que é muito alto para HTML.
  • A próxima parte adiciona uma nova linha (o Vim acha que é um retorno de carro, suspiro) após cada elemento (> ).
  • Em seguida, indente novamente o arquivo inteiro com = .
  • Então sem destaque >(desde que eu tenhoset hlsearch no meu vimrc).
  • Em seguida, remova todas as linhas vazias / somente espaços em branco (consulte " Vim excluir linhas em branco " para obter mais informações, isso também é escapado duas vezes porque está no shell).

Você pode adicionar | wq! fileOut.htmlaté o final se não quiser entrar no Vim, mas apenas limpe o arquivo.

adam_0
fonte
Solução pura! Modifiquei-o para :%s/>\s*/>\r/g(adicionei um gpara substituição global e \s*retire o espaço em branco à direita). Também adicionei :%s/</\r</gpara adicionar uma nova linha antes do colchete aberto. Caso contrário, as tags like <td>foo</td>serão divididas como <td>e foo</td>.
22618 wisbucky
Ponto justo, tenho a substituição global ativada por padrão e é por isso que não está na minha solução.
27418 adam_0
7

Eu uso este script: https://github.com/maksimr/vim-jsbeautify

No link acima, você tem todas as informações:

  1. Instalar
  2. Configurar (copiar do primeiro exemplo)
  3. Corre :call HtmlBeautify()

Faz o trabalho lindamente!

SimonW
fonte
3
haha, por que você iria querer js nó uso + para limpar html no vim, que teve este builtin capacidade para mais de nó existe mesmo ... confunde a minha mente ..
MB21
4

Você já tentou usar o script de indentação HTML no site do Vim?

JaredPar
fonte
+1, eu não vi isso. Seria bom se eu não precisasse executar um script, mas parece que esse pode ser o único caminho.
Mmcdole
Este script está obsoleto agora e uma versão mais recente vem com o vim (por exemplo /usr/share/vim/vim74/indent/html.vim). "2014 04 de julho: Vim 7.4.356 ou posterior inclui um descendente desse script (o script oficial é agora mantido por Bram e inclui grandes mudanças)"
wisbucky
4

Aqui está uma solução pesada que faz você recuar, além de toda a impressão bonita em HTML com a qual você não quer necessariamente se preocupar enquanto estiver editando.

Primeiro, faça o download do Tidy . Certifique-se de adicionar o binário ao seu caminho, para que você possa chamá-lo de qualquer local.

Em seguida, crie um arquivo de configuração descrevendo seu sabor HTML favorito. A documentação não é ótima para o Tidy, mas aqui está uma visão geral e uma lista de todas as opções . Aqui está o meu arquivo de configuração:

bare: yes
break-before-br: no
clean: yes
drop-proprietary-attributes: yes
fix-uri: yes
indent-spaces: 4
indent: yes
logical-emphasis: yes
markup: yes
output-xhtml: yes
quiet: yes
quote-marks: yes
replace-color: yes
tab-size: 4
uppercase-tags: no
vertical-space: yes
word-2000: yes
wrap: 0

Guarde isto como tidyrc_html.txtno seuftplugin pasta (em vimfiles).

Mais um arquivo: adicione a seguinte linha a (ou crie) html.vim, também em ftplugin:

map <leader>tidy :%! tidy -config ~/vimfiles/ftplugin/tidyrc_html.txt <CR>

Para usá-lo, basta abrir um arquivo HTML e digite /tidy. (Esse /é o<leader> chave.)

Ai está! Não é uma solução rápida, por qualquer meio, mas agora você está um pouco melhor equipado para editar esses enormes arquivos HTML bagunçados.

Lêmure
fonte
2

Você pode integrar o tidy e o html-beautify automaticamente instalando o plugin vim-autoformat . Depois disso, você pode executar o formatador instalado com um único pressionamento de tecla.

Chiel ten Brinke
fonte
0

Eu tentei o comando "gg = G" usual, que é o que eu uso para corrigir o recuo dos arquivos de código. No entanto, não parecia funcionar direito em arquivos HTML. Ele simplesmente removeu toda a formatação.

Se o autoformato / recuo do vim gg=G parece estar "quebrado" (como à esquerda em todas as linhas), provavelmente o plug-in de recuo não está ativado / carregado. Deveria realmente dar uma mensagem de erro em vez de apenas fazer um recuo ruim, caso contrário, os usuários acham que o recurso de autoformação / recuo é péssimo, quando na verdade é muito bom.

Para verificar se o plugin de recuo está ativado / carregado, execute :scriptnames. Veja se .../indent/html.vimestá na lista. Caso contrário, isso significa que o plug-in não está carregado. Nesse caso, adicione esta linha a ~/.vimrc:

filetype plugin indent on

Agora, se você abrir o arquivo e executar :scriptnames, deverá ver .../indent/html.vim. Em seguida gg=G, execute , o que deve executar o autoformato / recuo correto agora. (Embora não adicione novas linhas, por isso, se todo o código html estiver em uma única linha, ele não será recuado).

Nota: se você estiver executando :filetype plugin indent onna linha de comandos do vim em vez de ~/.vimrc, deverá abrir novamente o arquivo :e.

Além disso, você não precisa se preocupar com autoindente smartindentconfigurações, eles não são relevantes para esta.

wisbucky
fonte