Comment fermer rapidement les balises HTML dans Vim?

117

Cela fait un moment que je n'ai pas eu à faire de code de type HTML Vim, mais récemment, je suis tombé dessus à nouveau. Dites que j'écris quelques simples HTML:

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

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

Bien sûr, je peux utiliser CtrlPpour compléter automatiquement les noms de balises individuelles, mais ce qui me permet d'utiliser le clavier de mon ordinateur portable est en fait d'obtenir les crochets et les barres obliques correctes.

html xml vim autocomplete wds
la source

Réponses:

38

Regarde ça..

closetag.vim 

Functions and mappings to close open HTML/XML tags

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

J'utilise quelque chose de similaire.

Ian P
la source
J'ai installé ceci. Il ne remplit pas automatiquement la balise de fermeture. Quel est le raccourci clavier? J'essaye Ctrl-_, mais cela fait une petite police de mon terminal.
alhelal
74

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

  1. Lorsque vous ouvrez une étiquette ( par exemple le type <p>), il élargit l'étiquette dès que vous tapez la fermeture >dans <p></p>et place le curseur dans la balise en mode d'insertion.

  2. Si vous en tapez immédiatement un autre >( par exemple, vous tapez <p>>), cela étend cela en

    <p>

    </p>

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

Le plugin xml vim ajoute un pliage de code et une balise imbriquée correspondant à 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 tampon Vim via le processeur Markdown de votre choix :)

hakamadare
la source
Ce plugin peut-il fermer automatiquement les balises lorsque «</» est saisi? Ou simplement insérer une balise de fermeture avec une touche? Parfois, vous supprimez la balise de fermeture et souhaitez l'insérer par la suite ...
bzx
7
Je n'aime pas ce plugin car il ne fournit pas un moyen facile de faire passer votre curseur au-delà de la balise générée. Par exemple, si vous voulez écrire "Have a <b> nice </b> day", vous commencez par taper "Have a <b> nice", qui se traduit par "Have a <b> nice | </ b > ". Vous devez ensuite faire une flèche vers la droite ou quitter le mode insertion pour continuer avec le reste de la phrase. C'est pourquoi une solution où vous appuyez sur une touche pour insérer la balise de fin est meilleure.
exclipy
1
@exclipy Vim a de nombreuses façons intégrées de le faire. Essayez les commandes «E», «f» et «A» pour commencer.
user456584
3
J'ai installé le plugin xmledit avec git clone https://github.com/sukima/xmledit.git ~/.vim/bundle/xmledit. Mais cela ne fonctionne que lors de l'édition de fichiers .xml. Lorsque le fichier ext est .html ou .htm, cela ne fonctionne pas.
Tchad
2
@Chad actuellement, ma solution était de copier-coller le fichier dans le même répertoire et de le renommer exactement en "html.vim" afin qu'il affecte également les fichiers HTML. Maintenant, j'ai exactement deux des mêmes fichiers dans ~ / .vim / ftplugin (xml.vim et html.vim).
user2719875
56

J'aime les choses minimales, 

imap ,/ </<C-X><C-O>
sjh
la source
4
Que fait <CX> <CO>? Ça ne fait rien pour moi.
exclipy
8
Il y a des cas où l'on aimerait écrire ", /", donc je préfère utiliser un raccourci différent. Un autre détail est que l'omni-complétion doit être fermée, sans attendre une entrée supplémentaire. Donc:imap <silent> <C-c> </<C-X><C-O><C-X>
1
Très cool. Également ajouté <Esc>F<ià la fin de celui-ci afin de remettre le curseur à l'intérieur de la balise.
mVChr
pour utiliser cette commande soyez en mode insertion, puis appuyez sur ,/pour fermer la balise
thedanotto
La solution ci-dessus a beaucoup de votes positifs mais elle manque d'explication, surtout pour un débutant comme moi. Comment ça marche et comment s'en servir?
Phemelo Khetho
50

Je trouve plus pratique de faire en sorte que vim écrive à la fois la balise d'ouverture et de fermeture à ma place, plutôt que la balise de fermeture. Vous pouvez utiliser l'excellent plugin ragtag de Tim Pope. L'utilisation ressemble à ceci (laissez | marquer la position du curseur) que vous tapez:

span |

appuyez sur CTRL+x SPACE

et vous obtenez

<span> | </span>

Vous pouvez également utiliser CTRL+ x ENTERau lieu de CTRL+ x SPACE, et vous obtenez

<span>
|
</span>

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

Krzysiek Goj
la source
+1 Génial! Btw, ceci est maintenant connu sous le nom de ragtag: vim.org/scripts/script.php?script_id=1896
neezer
Celui-ci est certainement le plus simple. Textmate l'avait bien, mais Vim le bat avec ça, merci Krzysiek.
josemota
23

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}

rendements

<html>
  <head>
    <title>This is a title</title>
  </head>
</html>
que ceux ci
la source
Merci beaucoup! C'est plus cool que tout ce que j'ai vu auparavant, non seulement Vim mais parmi tous les autres éditeurs! Super!
Chris
Ceci est un excellent plugin
DenniJensen
Ce plugin a évolué à partir du codage zen. Ce dernier est maintenant connu sous le nom d' emmet et possède un ensemble de fonctionnalités légèrement plus grand.
chb
17

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

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

Mise à jour: cela s'appelle désormais 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>
  ---------------------
Preet Kukreti
la source
whoa, est-ce le créateur du rubis?
tjklemz
13

Cartographie

J'aime que mes balises de bloc (par opposition aux balises en ligne) soient fermées immédiatement et avec un raccourci aussi simple que possible (j'aime éviter les touches spéciales comme CTRLlorsque c'est possible, même si j'utilise closetag.vimpour fermer mes balises en ligne.) J'aime utiliser ceci 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 des crochets de fermeture et un caractère de tabulation; c'est ce qui correspond
  • ><Esc> signifie terminer la première étiquette et sortir de l'insertion en mode normal
  • F< signifie trouver le dernier support d'angle d'ouverture
  • l signifie déplacer le curseur vers la droite (ne pas copier le crochet d'ouverture)
  • yt> signifie tirer de la position du curseur vers le haut jusqu'à la prochaine parenthèse angulaire de fermeture (c'est-à-dire copier le contenu des balises)
  • o</ signifie commencer une nouvelle ligne en mode insertion et ajouter un crochet d'angle d'ouverture et une barre oblique
  • <C-r>" signifie coller en mode insertion à partir du registre par défaut ( ")
  • ><Esc> signifie fermer l'étiquette de fermeture et sortir du mode insertion
  • O<Space> signifie commencer une nouvelle ligne en mode insertion au-dessus du curseur et insérer un espace
Keith Pinson
la source
@wds Wow, ouais, je n'ai jamais pensé au fait que cela lsignifiait «droite» et non «gauche», haha ​​... quelle drôle d'erreur. Qu'avez-vous pensé de mon message? J'ai remarqué que vous n'avez pas voté pour.
Keith Pinson
Bien sûr. J'ai récemment utilisé le plugin xml.vim (cela fonctionne très bien). Je suggère de l'ajouter à votre .vimrc avec une autocommande spécifique au type de fichier, c'est-à-dire:au filetype html inoremap <buffer> ...
wds
1
Enfin une commande Autoclose qui fonctionne exactement comme il se doit - tout simplement!
cnp
J'aime garder mon curseur entre les balises. Je l'ai donc modifié en fonction de mes besoins. inoremap ><Tab> ><Esc>F<lyt>o</<C-r>"><Esc>kJxiJe supprime 0<Space>et ajoute kJxi. Montez d'un cran, concaténez deux lignes, supprimez un caractère puis passez en mode insertion.
Samundra
9

Check-out vim-closetag

C'est un script très simple (également disponible sous forme de vundleplugin) qui ferme les balises HTML (X) pour vous. De c'est README:

S'il s'agit du contenu actuel:

<table|

Maintenant que vous appuyez sur >, le contenu sera:

<table>|</table>

Et maintenant, si vous appuyez à >nouveau, le contenu sera:

<table>
   |
</table>

Remarque: |le curseur est-il ici

Sheharyar
la source
6

allml (maintenant Ragtag) et Omni-completion (<CX> <CO>) ne fonctionnent pas dans un fichier comme .py ou .java.

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

imap <Cj> <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 fermez la balise comme ceci.

<p> abcde </p> |

Kimilhee
la source
avec imap <Cj> <ESC> mfF <lyt> `fa </ <CR>"> la balise de clonage est l'endroit où se trouvait le curseur lorsque vous avez tapé ^ j au lieu de la fin de la ligne ($)
Pietro
5

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

  1. Fermeture automatique d'une balise HTML

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

  2. Activer l'achèvement

    autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags

mloskot
la source
1
Réponse géniale !!! sans plugin !!! (Le deuxième élément a linkrot) peut-être encore la meilleure réponse de toutes, car il semble plus rapide de modifier le .vimrc que de gérer les plugins. Plus la réponse la plus minimaliste
nilon
Cela ajoute de l'espace après le tag fermé :(
Vitaly Zdanevich
4

S'appuyant sur l'excellente réponse de @KeithPinson (désolé, pas encore assez de points de réputation pour commenter votre réponse), cette alternative empêchera la saisie semi-automatique de copier tout ce qui pourrait se trouver à l'intérieur de la balise html (par exemple, classes, identifiants, etc.) .) mais ne doit pas être copié dans la balise de fermeture.

MISE À JOUR J'ai mis à jour ma réponse pour travailler avec des filename.html.erbfichiers.
J'ai remarqué que ma réponse d'origine ne fonctionnait pas dans les fichiers couramment utilisés dans les vues Rails, comme some_file.html.erblorsque j'utilisais ruby ​​intégré (par exemple <p>Year: <%= @year %><p>). Le code ci - dessous fonctionnera avec les .html.erbfichiers.

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

Exemple d'utilisation

Type:

<div class="foo">[Tab]

Résultat:

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

où |indique la position du curseur

Il est vrai que les deux exemples ci - dessus se fondent sur >[Tab]pour signaler une balise de fermeture ( ce qui signifie que vous devez choisir soit en ligne ou sous forme de bloc). Personnellement, j'utilise le style bloc avec >[Tab]et le style en ligne avec >>.

Nick Erhardt
la source