Comment fermer rapidement des balises HTML dans Vim?

Question

Cela fait un moment que je n'ai pas eu à faire de code de type HTML dans Vim, mais récemment je suis tombé à nouveau sur cela. Disons que j'écris un simple HTML:

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

Comment puis-je écrire ces balises de fermeture pour le titre, la tête et le HTML rapidement? J'ai l'impression que je manque ici un moyen très simple qui ne m'implique pas de les écrire tous un par un.

Bien sûr, je peux utiliser CtrlP pour compléter automatiquement les noms de balises individuelles, mais ce qui me permet d'obtenir le clavier de mon ordinateur portable, c'est d'obtenir les crochets et la barre oblique.

Ian P · Accepted Answer

Regarde ça..

closetag.vim

Functions and mappings to close open HTML/XML tags

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

J'utilise quelque chose de similaire.

hakamadare · Answer

Je trouve l'utilisation du plugin xmledit assez utile. il ajoute deux fonctionnalités:

Lorsque vous ouvrez une balise (, par exemple , tapez <p>), il étend la balise dès que vous tapez la fermeture > en <p></p> et place le curseur à l'intérieur de la balise en mode insertion.
Si vous saisissez immédiatement un autre > ( par exemple vous tapez <p>>), il étend cela en

<p>

</p>

et place le curseur à l'intérieur de la balise, une fois en retrait, en mode insertion.

Le plugin xml vim ajoute le pliage de code et la correspondance de balises imbriquées à ces fonctionnalités.

Bien sûr, vous n'avez pas du tout à vous soucier de la fermeture des balises si vous écrivez votre contenu HTML dans Markdown et utilisez %! pour filtrer votre buffer Vim via le processeur Markdown de votre choix :)

sjh · Answer

J'aime les choses minimes,

imap ,/ </<C-X><C-O>

Krzysiek Goj · Answer

Je trouve plus pratique de faire en sorte que vim écrive les balises d'ouverture et de fermeture pour moi, au lieu de simplement la fermeture. Vous pouvez utiliser un excellent plugin ragtag par Tim Pope. L'utilisation ressemble à ceci (laissez | marquer la position du curseur) que vous tapez:

durée |

presse CTRL+x SPACE

et vous obtenez

<span> | </span>

Vous pouvez aussi utiliser CTRL+x ENTER au lieu de CTRL+x SPACEet vous obtenez

<span> | </span>

Ragtag peut faire plus que cela (par exemple, insérer <% = des trucs autour de ce%> ou DOCTYPE). Vous voulez probablement vérifier d'autres plugins par auteur de ragtag , en particulier surround .

thanthese · Answer

Si vous faites quelque chose de élaboré, sparkup est très bon.

Un exemple de leur site:

ul > li.item-$*3 s'étend à:

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

avec un <C-e>.

Pour faire l'exemple donné dans la question,

html > head > title{This is a title}

les rendements

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

Preet Kukreti · Answer

Il existe également un plugin vim de zencoding: https://github.com/mattn/zencoding-vim

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

Mise à jour: cela s'appelle maintenant Emmet : http://emmet.io/

Un extrait du tutoriel:

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

Keith Pinson · Answer

Cartographie

J'aime que mes balises de bloc (par opposition à inline) soient fermées immédiatement et avec un raccourci aussi simple que possible (j'aime éviter les touches spéciales comme CTRL si possible, bien que j'utilise closetag.vim pour fermer mes balises en ligne.) J'aime utiliser ce raccourci lors du démarrage de blocs de balises (grâce à @kimilhee; c'est un décollage de sa réponse):

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

Exemple d'utilisation

Type-

<p>[Tab]

Résultat-

<p> | </p>

où | indique la position du curseur.

Explication

inoremap signifie créer le mappage en mode insertion
><Tab> signifie une parenthèse fermante et un caractère de tabulation; c'est ce qui correspond
><Esc> signifie terminer la première balise et sortir de l'insertion en mode normal
F< signifie trouver la dernière équerre d'ouverture
l signifie déplacer le curseur vers la droite (ne pas copier le crochet angulaire d'ouverture)
yt> signifie tirez de la position du curseur jusqu'à avant le prochain angle de fermeture (c'est-à-dire copiez le contenu des balises)
o</ signifie commencer une nouvelle ligne en mode insertion et ajouter un support d'angle d'ouverture et une barre oblique
<C-r>" signifie coller en mode insertion à partir du registre par défaut (")
><Esc> signifie ferme la balise de fermeture et quitte le mode d'insertion
O<Space> signifie commencer une nouvelle ligne en mode insertion au-dessus du curseur et insérer un espace

kimilhee · Answer

allml (maintenant Ragtag) et Omni-Completion (<C-X> <C-O>) ne fonctionnent pas dans un fichier comme .py ou .Java.

si vous souhaitez fermer la balise automatiquement dans ces fichiers, vous pouvez mapper comme ceci.

 imap <C-j> <ESC> F <lyt> $ a </ ^ R ">

(^ R est Contrl + R: vous pouvez taper comme ceci Control + v puis Control + r)

(| est la position du curseur) maintenant si vous tapez ..

<p> abcde |

et tapez ^ j

puis il ferme la balise comme ça ..

<p> abcde </p> |

Sheharyar · Answer

Check-out `vim-closetag`

C'est un script vraiment simple (également disponible en tant que plugin vundle) qui ferme les balises (X) HTML pour vous. De c'est README:

S'il s'agit du contenu actuel:
<table| 
Maintenant, vous appuyez sur >, le contenu sera:
<table>|</table> 
Et maintenant, si vous appuyez sur > encore une fois, le contenu sera:
<table> | </table> 

Remarque: | est le curseur ici

mloskot · Answer

Voici encore une autre solution simple basée sur une écriture Web facilement trouvable:

Nick Erhardt · Answer

En s'appuyant sur l'excellente réponse de @KeithPinson (désolé, pas assez de points de réputation pour commenter votre réponse pour le moment), cette alternative empêchera la saisie semi-automatique de copier quoi que ce soit de plus qui pourrait être à l'intérieur de la balise html (par exemple les classes, les identifiants, etc.) .) mais ne doit pas être copié dans la balise de fermeture.

UPDATE J'ai mis à jour ma réponse pour travailler avec filename.html.erb des dossiers.
J'ai remarqué que ma réponse d'origine ne fonctionnait pas dans les fichiers couramment utilisés dans Rails vues, comme some_file.html.erb lorsque j'utilisais l'embarqué Ruby (par exemple <p>Year: <%= @year %><p>). Le code ci-dessous fonctionnera avec .html.erb des dossiers.

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

Exemple d'utilisation

Type:

<div class="foo">[Tab]

Résultat:

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

où | indique la position du curseur

Et comme exemple d'ajout de la balise de fermeture en ligne au lieu du style de bloc:

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