Como alguém pode fechar tags HTML no Vim rapidamente?

117

Já faz um tempo que não preciso fazer nenhum código semelhante a HTML Vim, mas recentemente me deparei com isso. Digamos que estou escrevendo algo simples HTML:

<html><head><title>This is a title</title></head></html>

Como escrevo essas tags de fechamento para título, cabeçalho e html rapidamente? Eu sinto que estou perdendo uma maneira realmente simples aqui que não envolve eu escrevendo todos eles um por um.

É claro que posso usar CtrlPpara preencher automaticamente os nomes de tags individuais, mas o que me atrai no teclado do meu laptop é acertar os colchetes e a barra.

html xml vim autocomplete wds
fonte

Respostas:

38

Veja isso..

closetag.vim 

Functions and mappings to close open HTML/XML tags

https://www.vim.org/scripts/script.php?script_id=13

Eu uso algo semelhante.

Ian P
fonte
Eu instalei isso. Ele não conclui a tag de fechamento automaticamente. Qual é a tecla de atalho? Eu tento Ctrl-_, mas isso torna a fonte pequena do meu terminal.
alhelal,
74

Acho que usar o plugin xmledit é muito útil. ele adiciona duas funcionalidades:

  1. Quando você abre uma tag ( por exemplo, tipo <p>), ele se expande a marca, logo que você digite o fechamento >em <p></p>e coloca o cursor dentro da tag no modo de inserção.

  2. Se você digitar imediatamente outro >( por exemplo, digitar <p>>), ele o expandirá para

    <p>

    </p>

e coloca o cursor dentro da tag, recuado uma vez, no modo de inserção.

O plugin xml vim adiciona dobradura de código e correspondência de tag aninhada a esses recursos.

Claro, você não precisa se preocupar com o fechamento de tags se escrever seu conteúdo HTML em Markdown e usar %!para filtrar seu buffer Vim através do processador Markdown de sua escolha :)

hakamadare
fonte
Este plugin pode fechar automaticamente as tags quando '</' é digitado? Ou apenas inserir a tag de fechamento com algumas teclas? Às vezes você exclui a tag de fechamento e quer inseri-la depois ...
bzx
7
Não gosto desse plugin porque ele não fornece uma maneira fácil de passar o cursor pela tag gerada. Por exemplo, se você deseja escrever "Tenha um <b> bom </b> dia", comece digitando "Tenha um <b> bom", que renderiza como "Tenha um <b> bom </b> | </ b > ". Em seguida, você precisa usar a seta para a direita ou sair do modo de inserção para continuar com o resto da frase. É por isso que uma solução em que você pressiona uma tecla para inserir a tag final é melhor.
exclusivo em
1
@exclipy Vim tem várias maneiras integradas de fazer isso. Experimente os comandos 'E', 'f' e 'A' para começar.
user456584
3
Instalei o plugin xmledit com git clone https://github.com/sukima/xmledit.git ~/.vim/bundle/xmledit. Mas só funciona ao editar arquivos .xml. Quando o arquivo ext é .html ou .htm, ele não funciona.
Chade
2
@Chad atualmente, a minha solução foi copiar e colar o arquivo no mesmo diretório e renomeá-lo exatamente para "html.vim" para que isso também afetasse os arquivos HTML. Agora, eu tenho dois dos mesmos arquivos em ~ / .vim / ftplugin (xml.vim e html.vim).
user2719875
56

Eu gosto de coisas mínimas, 

imap ,/ </<C-X><C-O>
sjh
fonte
4
O que <CX> <CO> faz? Isso não faz nada por mim.
exclipy,
8
Há casos em que se gostaria de escrever ", /", então prefiro usar um atalho diferente. Outro detalhe é que o omni-complete deve ser fechado, sem esperar por entradas adicionais. Então:imap <silent> <C-c> </<C-X><C-O><C-X>
1
Muito legal. Também adicionado <Esc>F<iao final deste para colocar o cursor de volta dentro da tag.
mVChr de
para usar este comando no modo de inserção, pressione ,/para fechar a tag
thedanotto
A solução acima tem muitos votos positivos, mas carece de explicação, especialmente para um iniciante como eu. Como funciona e como usá-lo?
Phemelo Khetho
49

Acho mais conveniente fazer o vim escrever as tags de abertura e fechamento para mim, em vez de apenas a de fechamento. Você pode usar um excelente plugin ragtag de Tim Pope. O uso se parece com isto (deixe | marcar a posição do cursor) que você digita:

span |

pressione CTRL+x SPACE

e você consegue

<span> | </span>

Você também pode usar CTRL+ em x ENTERvez de CTRL+ x SPACE, e obterá

<span>
|
</span>

Ragtag pode fazer mais do que apenas isso (por exemplo, inserir <% = coisas em torno deste%> ou DOCTYPE). Você provavelmente deseja verificar outros plug-ins do autor de ragtag , especialmente surround .

Krzysiek Goj
fonte
+1 Incrível! A propósito, agora é conhecido como ragtag: vim.org/scripts/script.php?script_id=1896
neezer
Este é definitivamente o mais simples. O Textmate teve uma boa, mas o Vim supera com isso, obrigado Krzysiek.
josemota,
23

Se você estiver fazendo algo elaborado, a animação é muito boa.

Um exemplo de seu site:

ul > li.item-$*3 expande para:

<ul>
    <li class="item-1"></li>
    <li class="item-2"></li>
    <li class="item-3"></li>
</ul>

com um <C-e>.

Para fazer o exemplo dado na pergunta, 

html > head > title{This is a title}

rendimentos

<html>
  <head>
    <title>This is a title</title>
  </head>
</html>
do que estes
fonte
Muito obrigado! Isso é mais legal do que qualquer coisa que eu já vi antes, não apenas Vim, mas entre quaisquer outros editores! Super!
Chris,
Este é um ótimo plugin
DenniJensen
Este plugin evoluiu da codificação zen. O último agora é conhecido como emmet e tem um conjunto de recursos um pouco maior.
chb
17

Também existe um plugin zencoding vim: https://github.com/mattn/zencoding-vim

tutorial: https://github.com/mattn/zencoding-vim/blob/master/TUTORIAL

Atualização: agora chamado Emmet : http://emmet.io/

Um trecho do tutorial:

1. Expand Abbreviation

  Type abbreviation as 'div>p#foo$*3>a' and type '<c-y>,'.
  ---------------------
  <div>
      <p id="foo1">
          <a href=""></a>
      </p>
      <p id="foo2">
          <a href=""></a>
      </p>
      <p id="foo3">
          <a href=""></a>
      </p>
  </div>
  ---------------------

2. Wrap with Abbreviation

  Write as below.
  ---------------------
  test1
  test2
  test3
  ---------------------
  Then do visual select(line wize) and type '<c-y>,'.
  If you request 'Tag:', then type 'ul>li*'.
  ---------------------
  <ul>
      <li>test1</li>
      <li>test2</li>
      <li>test3</li>
  </ul>
  ---------------------

...

12. Make anchor from URL

  Move cursor to URL
  ---------------------
  http://www.google.com/
  ---------------------
  Type '<c-y>a'
  ---------------------
  <a href="http://www.google.com/">Google</a>
  ---------------------
Preet Kukreti
fonte
uau, isso é do criador do rubi?
tjklemz
13

Mapeamento

Eu gosto de ter minhas tags de bloco (ao invés de inline) fechadas imediatamente e com um atalho o mais simples possível (eu gosto de evitar teclas especiais como CTRLonde for possível, embora eu use closetag.vimpara fechar minhas tags inline.) Eu gosto de usar isso atalho ao iniciar blocos de tags (graças a @kimilhee; esta é uma saída de sua resposta):

inoremap ><Tab> ><Esc>F<lyt>o</<C-r>"><Esc>O<Space>

Uso de amostra

Tipo-

<p>[Tab]

Resultado-

<p>
 |
</p>

onde |indica a posição do cursor.

Explicação

  • inoremap significa criar o mapeamento no modo de inserção
  • ><Tab> significa colchetes angulares de fechamento e um caractere de tabulação; isto é o que combina
  • ><Esc> significa terminar a primeira tag e escapar da inserção no modo normal
  • F< significa encontrar o último colchete angular de abertura
  • l significa mover o cursor para a direita (não copie o colchete angular de abertura)
  • yt> significa puxar da posição do cursor até antes do próximo colchete angular de fechamento (ou seja, copiar o conteúdo das tags)
  • o</ significa iniciar uma nova linha no modo de inserção e adicionar um colchete angular de abertura e uma barra
  • <C-r>" significa colar no modo de inserção a partir do registro padrão (" )
  • ><Esc> significa fechar a tag de fechamento e sair do modo de inserção
  • O<Space> significa iniciar uma nova linha no modo de inserção acima do cursor e inserir um espaço
Keith Pinson
fonte
@wds Uau, sim, nunca pensei sobre o fato de que lsignificava "direita" e não "esquerda", haha ​​... que erro engraçado. O que você achou da minha postagem? Percebi que você não votou positivamente.
Keith Pinson
Bom, com certeza. Comecei a usar o plugin xml.vim recentemente (funciona muito bem). Eu sugeriria adicioná-lo ao seu .vimrc com um comando automático específico do tipo de arquivo, ou seja:au filetype html inoremap <buffer> ...
wds
1
Finalmente, um comando Autoclose que funciona exatamente como deveria - simplesmente!
cnp
Gosto de manter meu cursor entre as tags. Então eu modifiquei para atender às minhas necessidades. inoremap ><Tab> ><Esc>F<lyt>o</<C-r>"><Esc>kJxiEu removo 0<Space>e adicionei kJxi. Vá 1 etapa acima, concatene duas linhas, remova um caractere e vá para o modo de inserção.
Samundra
9

Verificação de saída vim-closetag

É um script muito simples (também disponível como um vundleplugin) que fecha (X) tags HTML para você. De README:

Se este for o conteúdo atual:

<table|

Agora que você pressiona >, o conteúdo será:

<table>|</table>

E agora se você pressionar > novamente, o conteúdo será:

<table>
   |
</table>

Nota: |o cursor está aqui

Sheharyar
fonte
6

allml (agora Ragtag) e Omni-completar (<CX> <CO>) não funcionam em um arquivo como .py ou .java.

se você quiser fechar a tag automaticamente nesses arquivos, você pode mapear assim.

imap <Cj> <ESC> F <lyt> $ a </ ^ R ">

(^ R é Contrl + R: você pode digitar assim Control + v e então Control + r)

(| é a posição do cursor) agora se você digitar ..

<p> abcde |

e digite ^ j

então feche a tag assim ..

<p> abcde </p> |

Kimilhee
fonte
com imap <Cj> <ESC> mfF <lyt> `fa </ <CR>"> a tag de clonagem está onde o cursor estava quando você digitou ^ j em vez do fim da linha ($)
Pietro
5

Aqui está outra solução simples baseada na escrita da Web facilmente encontrada:

  1. Fechamento automático de uma tag HTML

    :iabbrev </ </<C-X><C-O>

  2. Ativando a conclusão

    autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags

mloskot
fonte
1
Resposta incrível !!! sem plugin !!! (O segundo item tem linkrot) talvez seja a melhor resposta de todas, porque parece mais rápido modificar o .vimrc do que manipular plug-ins. Além da resposta mais minimalista
nilon
Isso adiciona espaço após tag fechada :(
Vitaly Zdanevich
4

Com base na excelente resposta de @KeithPinson (desculpe, ainda não há pontos de reputação suficientes para comentar sua resposta), esta alternativa impedirá que o preenchimento automático copie qualquer coisa extra que possa estar dentro da tag html (por exemplo, classes, ids, etc. .) mas não deve ser copiado para a tag de fechamento.

ATUALIZAÇÃO Eu atualizei minha resposta para trabalhar com filename.html.erbarquivos.
Percebi que minha resposta original não funcionou em arquivos comumente usados ​​em visualizações Rails, como some_file.html.erbquando eu estava usando ruby ​​embutido (por exemplo <p>Year: <%= @year %><p>). O código abaixo irá trabalhar com .html.erbarquivos.

inoremap ><Tab> ><Esc>?<[a-z]<CR>lyiwo</<C-r>"><Esc>O

Uso de amostra

Tipo:

<div class="foo">[Tab]

Resultado:

<div class="foo">
  |
<div>

onde |indica a posição do cursor

E como exemplo de adição da tag de fechamento embutida em vez do estilo de bloco:

inoremap ><Tab> ><Esc>?<[a-z]<CR>lyiwh/[^%]><CR>la</<C-r>"><Esc>F<i

Uso de amostra

Tipo:

<div class="foo">[Tab]

Resultado:

<div class="foo">|<div>

onde |indica a posição do cursor

É verdade que ambos os exemplos acima contam >[Tab]para sinalizar uma tag de fechamento (o que significa que você teria que escolher o estilo embutido ou bloco). Pessoalmente, eu uso o estilo de bloco com >[Tab]e o estilo embutido com >>.

Nick Erhardt
fonte