117

HTML benzeri herhangi bir kod yapmak zorunda kalmayalı epey zaman oldu Vim, ancak son zamanlarda bununla tekrar karşılaştım. Diyelim ki basit bir şeyler yazıyorum HTML:

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

Başlık, başlık ve html için bu kapanış etiketlerini hızlı bir şekilde nasıl yazabilirim? Burada hepsini tek tek yazmamı gerektirmeyen gerçekten basit bir yolu özlediğimi hissediyorum.

Elbette CtrlP, tek tek etiket adlarını otomatik tamamlamak için kullanabilirim , ancak dizüstü bilgisayar klavyemde beni etkileyen şey aslında parantezleri almak ve doğru eğik çizgiyi almaktır.

— wds
kaynak

38

Şuna bir bak ..

closetag.vim

Functions and mappings to close open HTML/XML tags

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

Ben benzer bir şey kullanıyorum.

— Ian P
kaynak

Bunu ben kurdum. Kapatma etiketini otomatik olarak tamamlamaz, kısayol nedir? Deniyorum Ctrl-_ama bu, terminalimin küçük yazı tipini oluşturuyor.

— alhelal

74

Xmledit eklentisini kullanmayı oldukça faydalı buluyorum . iki parça işlevsellik ekler:

Bir etiketi (açtığınızda örneğin tip <p>), yakında size kapanış yazarken olarak etiketini genişletir >içine <p></p>ve ekleme modunda etiket içinde imleci yerleştirir.
Daha sonra hemen başka bir tane yazarsanız >( örneğin yazarsanız <p>>), bunu

<p>

</p>

ve imleci, ekleme modunda bir kez girintilenerek etiketin içine yerleştirir.

Xml vim eklenti bu özelliklere kod katlama ve iç içe etiketi eşleşmesini ekler.

Elbette, HTML içeriğinizi Markdown'da yazıp %!Vim tamponunuzu seçtiğiniz Markdown işlemcisi aracılığıyla filtrelemek için kullanıyorsanız , etiketlerin kapatılması konusunda endişelenmenize gerek yok :)

— hakamadare
kaynak

Bu eklenti, '</' yazıldığında etiketleri otomatik olarak kapatabilir mi? Ya da sadece bazı tuş vuruşlarıyla kapanış etiketi mi eklemek istiyorsunuz? Bazen kapanış etiketini silip daha sonra eklenmesini istersiniz ...

— bzx

7

Bu eklentiyi sevmiyorum çünkü imlecinizi oluşturulan etiketin ötesine götürmenin kolay bir yolunu sağlamıyor. Örneğin, "<b> iyi günler </b>" yazmak istiyorsanız, "Güzel bir gün geçirin" yazarak başlarsınız, bu da "Güzel bir <b> iyi günler" </ b >". Daha sonra cümlenin geri kalanına devam etmek için ya sağ ok çapraz ya da ekleme modundan çıkmanız gerekir. Bu nedenle, bitiş etiketini eklemek için bir tuşa bastığınız bir çözüm daha iyidir.

— exclipy

1

@exclipy Vim bunu yapmak için pek çok yerleşik yola sahiptir. Yeni başlayanlar için 'E', 'f' ve 'A' komutlarını deneyin.

— user456584

3

Xmledit eklentisini git clone https://github.com/sukima/xmledit.git ~/.vim/bundle/xmledit. Ancak yalnızca .xml dosyalarını düzenlerken çalışır. Dosya uzantısı .html veya .htm olduğunda çalışmaz.

— Çad

2

@Chad şu anda, benim çözümüm dosyayı kopyalayıp aynı dizine yapıştırmak ve HTML dosyalarını da etkileyecek şekilde "html.vim" olarak yeniden adlandırmaktı. Şimdi, ~ / .vim / ftplugin (xml.vim ve html.vim) içinde aynı dosyalardan ikisi var.

— user2719875

56

Minimal şeyleri severim

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

— SJH
kaynak

4

<CX> <CO> ne yapar? Benim için hiçbir şey yapmıyor.

— 06

8

Birinin ", /" yazmak istediği durumlar vardır, bu yüzden farklı bir kısayol kullanmayı tercih ederim. Diğer bir ayrıntı da, omni-tamamlamanın ek girdi beklemeden kapatılması gerektiğidir. Yani:imap <silent> <C-c> </<C-X><C-O><C-X>

1

Çok havalı. Ayrıca <Esc>F<iimleci etiketin içine geri koyması için bunun sonuna da eklendi .

— mVChr

Bu komutu kullanmak için ekleme modunda olun, ardından ,/etiketi kapatmak için basın

— thedanotto

Yukarıdaki çözümün pek çok olumlu oyu var, ancak özellikle benim gibi yeni başlayanlar için açıklaması yok. Nasıl çalışır ve nasıl kullanılır?

— Phemelo Khetho

50

Ben sadece kapanış etiketi yerine vim'in hem açılış hem de kapanış etiketi yazmasını daha uygun buluyorum. Tim Pope'un mükemmel ragtag eklentisini kullanabilirsiniz . Kullanım şöyle görünür (let | imleç konumunu işaretleyin) yazdığınız:

açıklık |

basın CTRL+x SPACE

ve sen alırsın

<Span> | </ span>

Ayrıca CTRL+ x ENTERyerine CTRL+ kullanabilir x SPACEve şunu elde edersiniz:

<Yayılma>
|
</ Span>

Ragtag bundan fazlasını yapabilir (ör. <% = Bu% 'nin etrafına bir şeyler ekleyin> veya DOCTYPE). Muhtemelen , özellikle surround olmak üzere , ragtag yazarının diğer eklentilerine göz atmak istersiniz .

— Krzysiek Goj
kaynak

+1 Harika! Btw, bu artık şu şekilde biliniyor ragtag: vim.org/scripts/script.php?script_id=1896

— neezer

Bu kesinlikle en basit olanıdır. Textmate iyi iş çıkardı, ama Vim bunu yeniyor, teşekkürler Krzysiek.

— josemota

23

Ayrıntılı bir şey yapıyorsanız, kıvılcım çok iyidir.

Sitelerinden bir örnek:

ul > li.item-$*3 şuna genişler:

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

bir <C-e>.

Soruda verilen örneği yapmak için,

html > head > title{This is a title}

verim

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

— Bunlardan daha
kaynak

Çok teşekkür ederim! Bu, daha önce gördüğüm her şeyden daha havalı, sadece Vim değil, diğer editörler arasında! Süper!

— Chris

Bu harika bir eklenti

— DenniJensen

Bu eklenti, zen kodlamadan geliştirilmiştir. İkincisi artık emmet olarak bilinir ve biraz daha büyük bir özellik kümesine sahiptir.

— chb

17

Ayrıca bir zencoding vim eklentisi de var: https://github.com/mattn/zencoding-vim

öğretici: https://github.com/mattn/zencoding-vim/blob/master/TUTORIAL

Güncelleme: bu artık Emmet olarak adlandırılıyor : http://emmet.io/

Öğreticiden bir alıntı:

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
kaynak

whoa, bu Ruby'nin yaratıcısı tarafından mı?

— tjklemz

13

haritalama

Blok etiketlerimin (satır içi etiketlerin aksine) hemen ve olabildiğince basit bir kısayolla kapatılmasını seviyorum (satır içi etiketlerimi kapatmak CTRLiçin kullansam da mümkün olduğunda özel tuşlardan kaçınmayı seviyorum closetag.vim.) Bunu kullanmayı seviyorum etiket bloklarını başlatırken kısayol (@kimilhee sayesinde; bu onun cevabından bir çıkış):

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

Örnek kullanım

Tür-

<p>[Tab]

Sonuç-

<p>
 |
</p>

nerede |imleç konumunu gösterir.

açıklama

inoremap eşlemeyi ekleme modunda oluşturmak anlamına gelir
><Tab> bir kapanış açısı parantezleri ve bir sekme karakteri anlamına gelir ; eşleşen bu
><Esc> ilk etiketi sonlandırmak ve eklemeden normal moda kaçmak anlamına gelir
F< son açılma açısını bulmak anlamına gelir
l imleci sağa bir hareket ettirmek anlamına gelir (açılma açısı ayracını kopyalamayın)
yt> imleç konumundan yukarıya, sonraki kapanış açılı ayracının öncesine kadar çekilmesi anlamına gelir (yani etiket içeriğini kopyala)
o</ ekleme modunda yeni satır başlatmak ve bir açılma açılı ayraç ve eğik çizgi eklemek anlamına gelir
<C-r>" varsayılan kayıttan ( ") ekleme modunda yapıştırmak anlamına gelir
><Esc> kapanış etiketini kapatmak ve ekleme modundan çıkmak anlamına gelir
O<Space> imlecin yukarısına ekleme modunda yeni bir satır başlatmak ve bir boşluk eklemek anlamına gelir

— Keith Pinson
kaynak

@wds Vay canına, evet, lbunun "sol" değil "doğru" anlamına geldiği gerçeğini hiç düşünmedim , haha ... ne komik bir hata. Gönderim hakkında ne düşündün? Oy vermediğini fark ettim.

— Keith Pinson

Kesinlikle güzel. Son zamanlarda xml.vim eklentisini kullanmaya başladım (oldukça iyi çalışıyor). au filetype html inoremap <buffer> ...

— Dosya türüne

1

Sonunda, tam olarak olması gerektiği gibi çalışan bir Otomatik Kapatma komutu - basitçe!

— cnp

İmlecimi etiketlerin arasında tutmayı seviyorum. Bu yüzden ihtiyacıma uyacak şekilde değiştirdim. inoremap ><Tab> ><Esc>F<lyt>o</<C-r>"><Esc>kJxiKaldırdım 0<Space>ve ekledim kJxi. 1 adım yukarı çıkın, iki satırı birleştirin, bir karakteri kaldırın ve ardından ekleme moduna geçin.

— Samundra

9

Çıkış yapmak `vim-closetag`

Bu, vundleHTML etiketlerini sizin için kapatan (X) gerçekten basit bir betiktir ( eklenti olarak da mevcuttur ). Ondan README:

Mevcut içerik buysa:
<table|
Şimdi tuşuna bastığınızda >içerik şöyle olacaktır:
<table>|</table>
Ve şimdi >tekrar basarsanız , içerik şöyle olacaktır:
<table>
   |
</table>

Not: |buradaki imleç

— Sheharyar
kaynak

6

allml (şimdi Ragtag) ve Omni-tamamlama (<CX> <CO>) .py veya .java gibi bir dosyada çalışmaz.

bu dosyada etiketi otomatik olarak kapatmak istiyorsanız, bunun gibi haritalayabilirsiniz.

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

(^ R, Contrl + R'dir: bu gibi Control + v ve ardından Control + r yazabilirsiniz)

(| imleç konumudur) şimdi yazarsanız ..

<P> abcde |

ve ^ j yazın

sonra etiketi bu şekilde kapatır ..

<P> abcde </ p> |

— kimilhee
kaynak

imap <Cj> <ESC> mfF <lyt> `fa </ <CR>"> ile satır sonu ($) yerine ^ j yazdığınızda imlecin bulunduğu yerde klonlama etiketi

— Pietro

5

İşte, kolayca bulunabilen Web yazımına dayanan başka bir basit çözüm:

Bir HTML etiketini otomatik olarak kapatma

:iabbrev </ </<C-X><C-O>
Tamamlama açılıyor

autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags

— mloskot
kaynak

1

Harika yanıt !!! eklenti olmadan !!! (2. öğede linkrot var) belki de en iyi yanıtı, çünkü eklentileri kullanmak yerine .vimrc'yi değiştirmek daha hızlı görünüyor. Artı en minimalist yanıt

— nilon

Bu, kapalı etiketten sonra boşluk ekler :(

— Vitaly Zdanevich

4

@ KeithPinson'ın mükemmel cevabından yola çıkarak (üzgünüm, cevabınız hakkında yorum yapmak için henüz yeterli itibar puanı yok), bu alternatif otomatik tamamlamanın html etiketi içinde olabilecek fazladan herhangi bir şeyi (örneğin sınıflar, kimlikler, vb.) Kopyalamasını engelleyecektir. .) ancak kapanış etiketine kopyalanmamalıdır.

GÜNCELLEMEfilename.html.erb Dosyalarla çalışmak için yanıtımı güncelledim .
Orijinal yanıtımın, some_file.html.erbgömülü yakut (ör. <p>Year: <%= @year %><p>) Kullandığım zamanki gibi, Rails görünümlerinde yaygın olarak kullanılan dosyalarda çalışmadığını fark ettim . Aşağıdaki kod olacaktır çalışmak .html.erbdosyaları.

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

Örnek kullanım

Tür:

<div class="foo">[Tab]

Sonuç:

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

nerede |imleç konumunu gösterir

Ve kapanış etiketini blok stili yerine satır içi eklemenin bir örneği olarak:

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

Örnek kullanım

Tür:

<div class="foo">[Tab]

Sonuç:

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

nerede |imleç konumunu gösterir

Bu yukarıdaki örneklerin her ikisi güvenmek doğrudur >[Tab](eğer tercih etmesi gerekir anlamına gelen bir kapanış etiketi sinyal ya satır içi veya blok tarzı). Şahsen, blok stilini ile >[Tab]ve satır içi stili ile kullanıyorum >>.

— Nick Erhardt
kaynak

Vim'de HTML etiketleri nasıl hızlı bir şekilde kapatılabilir?

haritalama

Örnek kullanım

açıklama

Çıkış yapmak vim-closetag

Çıkış yapmak `vim-closetag`