Bagaimana seseorang bisa menutup tag HTML di Vim dengan cepat?

117

Sudah lama sejak saya harus melakukan kode seperti HTML Vim, tetapi baru-baru ini saya menemukan ini lagi. Katakanlah saya sedang menulis beberapa yang sederhana HTML:

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

Bagaimana cara menulis tag penutup untuk judul, head dan html dengan cepat? Saya merasa seperti saya kehilangan beberapa cara yang sangat sederhana di sini yang tidak melibatkan saya untuk menulis semuanya satu per satu.

Tentu saja saya dapat menggunakan CtrlPuntuk melengkapi otomatis nama tag individu tetapi yang membuat saya di keyboard laptop saya sebenarnya mendapatkan tanda kurung dan garis miring dengan benar.

html xml vim autocomplete wds
sumber

Jawaban:

38

Lihat ini ..

closetag.vim 

Functions and mappings to close open HTML/XML tags

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

Saya menggunakan sesuatu yang serupa.

Ian P
sumber
Saya telah menginstal ini. Itu tidak menyelesaikan tag penutup secara otomatis. Apa itu shortkey? Saya mencoba Ctrl-_, tetapi ini membuat font kecil dari terminal saya.
alhelal
74

Saya merasa menggunakan plugin xmledit cukup berguna. itu menambahkan dua fungsi:

  1. Ketika Anda membuka tag ( misalnya jenis <p>), mengembang tag segera setelah Anda mengetik penutupan >ke <p></p>dan menempatkan kursor di dalam tag dalam mode insert.

  2. Jika Anda kemudian segera mengetik yang lain >( misalnya Anda mengetik <p>>), itu akan memperluasnya menjadi

    <p>

    </p>

dan menempatkan kursor di dalam tag, menjorok sekali, dalam mode sisipkan.

The xml vim Plugin menambahkan kode lipat dan bersarang tag yang cocok untuk fitur ini.

Tentu saja, Anda tidak perlu khawatir tentang menutup tag sama sekali jika Anda menulis konten HTML Anda dalam Markdown dan menggunakannya %!untuk memfilter buffer Vim Anda melalui prosesor Markdown pilihan Anda :)

hakamadare
sumber
Bisakah plugin ini menutup otomatis tag ketika '</' diketik? Atau hanya memasukkan tag penutup dengan beberapa penekanan tombol? Kadang-kadang Anda menghapus tag penutup dan ingin memasukkannya sesudahnya ...
bzx
7
Saya tidak suka plugin ini karena tidak memberikan cara mudah untuk mengarahkan kursor Anda melewati tag yang dibuat. Misalnya, jika Anda ingin menulis "Semoga hari Anda <b> menyenangkan </b>", Anda memulai dengan mengetik "Semoga hari <b> menyenangkan", yang diterjemahkan menjadi "Selamat bersenang-senang | </ b > ". Anda kemudian perlu panah kanan melintasi atau keluar dari mode penyisipan untuk melanjutkan dengan sisa kalimat. Itulah mengapa solusi di mana Anda menekan tombol untuk memasukkan tag akhir lebih baik.
exclipy
1
@exclipy Vim memiliki banyak cara bawaan untuk melakukan ini. Coba perintah 'E', 'f', dan 'A' sebagai permulaan.
pengguna456584
3
Saya menginstal plugin xmledit dengan git clone https://github.com/sukima/xmledit.git ~/.vim/bundle/xmledit. Tapi itu hanya berfungsi saat mengedit file .xml. Jika ext file adalah .html atau .htm, itu tidak berfungsi.
Chad
2
@Chad saat ini, solusi saya adalah menyalin dan menempel file di direktori yang sama persis ganti namanya menjadi "html.vim" sehingga itu akan mempengaruhi file HTML juga. Sekarang, saya memiliki dua file yang sama persis di ~ / .vim / ftplugin (xml.vim dan html.vim).
pengguna2719875
56

Saya suka hal-hal minimal, 

imap ,/ </<C-X><C-O>
sjh
sumber
4
Apa yang dilakukan <CX> <CO>? Itu tidak melakukan apapun untuk saya.
exclipy
8
Ada kasus di mana seseorang ingin menulis ", /", jadi saya lebih suka menggunakan pintasan yang berbeda. Detail lainnya adalah penyelesaian omni harus ditutup, tidak menunggu masukan tambahan. Jadi:imap <silent> <C-c> </<C-X><C-O><C-X>
1
Sangat keren. Juga ditambahkan <Esc>F<idi akhir ini sehingga menempatkan kursor kembali di dalam tag.
mVChr
untuk menggunakan perintah ini berada dalam mode penyisipan, lalu tekan ,/untuk menutup tag
thedanotto
Solusi di atas memiliki banyak upvote tetapi kurang penjelasannya terutama untuk pemula seperti saya. Bagaimana cara kerjanya dan bagaimana cara menggunakannya?
Phemelo Khetho
50

Saya merasa lebih nyaman membuat vim menulis tag pembuka dan penutup untuk saya, bukan hanya tag penutup. Anda dapat menggunakan plugin ragtag yang sangat baik dari Tim Pope. Penggunaannya terlihat seperti ini (biarkan | tandai posisi kursor) yang Anda ketik:

rentang |

tekan CTRL+x SPACE

dan kamu mendapatkan

<span> | </span>

Anda juga dapat menggunakan CTRL+, x ENTERbukan CTRL+ x SPACE, dan Anda mendapatkan

<span>
|
</span>

Ragtag dapat melakukan lebih dari itu (mis. Masukkan <% = hal di sekitar%> atau DOCTYPE ini). Anda mungkin ingin memeriksa plugin lain oleh penulis ragtag , terutama surround .

Krzysiek Goj
sumber
+1 Luar Biasa! Btw, ini sekarang dikenal sebagai ragtag: vim.org/scripts/script.php?script_id=1896
neezer
Yang ini pasti yang paling sederhana. Textmate punya bagus, tapi Vim mengalahkannya dengan ini, terima kasih Krzysiek.
josemota
23

Jika Anda melakukan sesuatu yang rumit, sparkup sangat bagus.

Contoh dari situs mereka:

ul > li.item-$*3 berkembang menjadi:

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

dengan a <C-e>.

Untuk melakukan contoh yang diberikan dalam pertanyaan, 

html > head > title{This is a title}

hasil

<html>
  <head>
    <title>This is a title</title>
  </head>
</html>
thanthese
sumber
Terima kasih banyak! Ini lebih keren dari apapun yang pernah saya lihat sebelumnya, tidak hanya Vim tetapi di antara editor lainnya! Super!
Chris
Ini adalah plugin yang bagus
DenniJen
Plugin ini berevolusi dari zen-coding. Yang terakhir sekarang dikenal sebagai emmet dan memiliki set fitur yang sedikit lebih besar.
chb
17

Ada juga plugin vim zencoding: https://github.com/mattn/zencoding-vim

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

Pembaruan: ini sekarang disebut Emmet : http://emmet.io/

Kutipan dari 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
sumber
whoa, apakah itu oleh pencipta ruby?
tjklemz
13

Pemetaan

Saya ingin agar tag blok saya (sebagai lawan sebaris) segera ditutup dan dengan pintasan sesederhana mungkin (Saya suka menghindari kunci khusus seperti CTRLjika memungkinkan, meskipun saya menggunakannya closetag.vimuntuk menutup tag sebaris saya.) Saya suka menggunakan ini pintasan saat memulai blok tag (terima kasih kepada @kimilhee; ini adalah take-off dari jawabannya):

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

Penggunaan sampel

Tipe-

<p>[Tab]

Hasil-

<p>
 |
</p>

dimana |menunjukkan posisi kursor.

Penjelasan

  • inoremap berarti membuat pemetaan dalam mode sisipkan
  • ><Tab> berarti tanda kurung sudut penutup dan karakter tab; inilah yang cocok
  • ><Esc> berarti mengakhiri tag pertama dan keluar dari penyisipan ke mode normal
  • F< berarti menemukan braket sudut bukaan terakhir
  • l Berarti gerakkan kursor ke kanan (jangan salin tanda kurung siku)
  • yt> Berarti menarik dari posisi kursor ke atas sampai sebelum kurung sudut tutup berikutnya (yaitu isi tag salin)
  • o</ berarti memulai baris baru dalam mode sisipan dan menambahkan kurung sudut bukaan dan garis miring
  • <C-r>" berarti tempel dalam mode sisipkan dari register default ( ")
  • ><Esc> berarti menutup tag penutup dan keluar dari mode penyisipan
  • O<Space> berarti memulai baris baru dalam mode sisipkan di atas kursor dan menyisipkan spasi
Keith Pinson
sumber
@wds Wow, ya, saya tidak pernah memikirkan fakta yang lberarti "benar" dan bukan "kiri," haha ​​... kesalahan yang lucu. Apa pendapat Anda tentang postingan saya? Saya perhatikan Anda tidak memberi suara positif.
Keith Pinson
Bagus pasti. Saya telah menggunakan plugin xml.vim baru-baru ini (ini berfungsi dengan baik). Saya akan menyarankan untuk menambahkannya ke .vimrc Anda dengan perintah otomatis khusus-file, yaitu:au filetype html inoremap <buffer> ...
wds
1
Akhirnya perintah Autoclose yang bekerja persis sebagaimana mestinya --sederhana!
cnp
Saya suka menempatkan kursor di antara tag. Jadi saya memodifikasinya agar sesuai dengan kebutuhan saya. inoremap ><Tab> ><Esc>F<lyt>o</<C-r>"><Esc>kJxiSaya menghapus 0<Space>dan menambahkan kJxi. Naik 1 langkah, gabungkan dua baris, hapus satu karakter lalu masuk ke mode sisipkan.
Samundra
9

Periksa vim-closetag

Ini adalah skrip yang sangat sederhana (juga tersedia sebagai vundleplugin) yang menutup tag (X) HTML untuk Anda. Dari itu README:

Jika ini adalah konten saat ini:

<table|

Sekarang Anda menekan >, isinya adalah:

<table>|</table>

Dan sekarang jika Anda menekan >lagi, isinya akan menjadi:

<table>
   |
</table>

Catatan: |adalah kursor di sini

Sheharyar
sumber
6

allml (sekarang Ragtag) dan Omni-penyelesaian (<CX> <CO>) tidak berfungsi dalam file seperti .py atau .java.

jika Anda ingin menutup tag secara otomatis di file tersebut, Anda dapat memetakan seperti ini.

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

(^ R adalah Contrl + R: Anda dapat mengetik seperti ini Control + v dan kemudian Control + r)

(| adalah posisi kursor) sekarang jika Anda mengetik ..

<p> abcde |

dan ketik ^ j

lalu tutup tag seperti ini ..

<p> abcde </p> |

kimilhee
sumber
dengan imap <Cj> <ESC> mfF <lyt> `fa </ <CR>"> tag penggandaan adalah tempat kursor berada saat Anda mengetik ^ j dan bukan di akhir baris ($)
Pietro
5

Berikut adalah solusi sederhana lainnya berdasarkan penulisan Web yang mudah ditemukan:

  1. Menutup otomatis tag HTML

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

  2. Mengaktifkan penyelesaian

    autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags

mloskot.dll
sumber
1
Respon yang luar biasa !!! tanpa plugin !!! (Item kedua memiliki linkrot) mungkin masih merupakan jawaban terbaik dari semuanya, karena tampaknya lebih cepat untuk memodifikasi .vimrc daripada menangani plugin. Ditambah respons paling minimalis
nilon
Ini menambah spasi setelah tag tertutup :(
Vitaly Zdanevich
4

Dibangun dari jawaban luar biasa dari @KeithPinson (maaf, poin reputasi belum cukup untuk mengomentari jawaban Anda), alternatif ini akan mencegah pelengkapan otomatis menyalin apa pun tambahan yang mungkin ada di dalam tag html (mis. Kelas, id, dll .. .) tetapi tidak boleh disalin ke tag penutup.

UPDATE Saya telah memperbarui tanggapan saya untuk bekerja dengan filename.html.erbfile.
Saya perhatikan respons asli saya tidak berfungsi dalam file yang biasa digunakan dalam tampilan Rails, seperti some_file.html.erbketika saya menggunakan ruby ​​yang disematkan (misalnya <p>Year: <%= @year %><p>). Kode di bawah ini akan bekerja dengan .html.erbfile.

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

Penggunaan sampel

Tipe:

<div class="foo">[Tab]

Hasil:

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

dimana |menunjukkan posisi kursor

Dan sebagai contoh menambahkan tag penutup sebaris sebagai ganti gaya blok:

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

Penggunaan sampel

Tipe:

<div class="foo">[Tab]

Hasil:

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

dimana |menunjukkan posisi kursor

Memang benar bahwa kedua contoh di atas bergantung pada >[Tab]untuk sinyal tag penutup (yang berarti Anda akan harus memilih baik inline atau blok gaya). Secara pribadi, saya menggunakan gaya blok dengan >[Tab]dan gaya sebaris dengan >>.

Nick Erhardt
sumber