117

เป็นเวลานานแล้วที่ฉันต้องทำโค้ดที่เหมือน HTML Vimแต่เมื่อเร็ว ๆ นี้ฉันก็เจอสิ่งนี้อีกครั้ง สมมติว่าฉันเขียนอะไรง่ายๆHTML:

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

ฉันจะเขียนแท็กปิดสำหรับ title, head และ html อย่างรวดเร็วได้อย่างไร ฉันรู้สึกว่าฉันพลาดวิธีง่ายๆที่นี่ซึ่งไม่ได้เกี่ยวข้องกับการเขียนลงไปทีละรายการ

แน่นอนฉันสามารถใช้CtrlPเพื่อเติมชื่อแท็กแต่ละแท็กโดยอัตโนมัติ แต่สิ่งที่ทำให้ฉันได้รับจากแป้นพิมพ์แล็ปท็อปของฉันคือการได้รับวงเล็บและเครื่องหมายทับขวา

— WDS
แหล่งที่มา

38

ลองดู..

closetag.vim

Functions and mappings to close open HTML/XML tags

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

ฉันใช้สิ่งที่คล้ายกัน

— เอียนป
แหล่งที่มา

ฉันได้ติดตั้งสิ่งนี้แล้ว มันไม่ได้ทำการปิดแท็กโดยอัตโนมัติคีย์ลัดคืออะไร? ฉันลองCtrl-_แต่สิ่งนี้ทำให้เป็นแบบอักษรขนาดเล็กของเทอร์มินัลของฉัน

— alhelal

74

ฉันพบว่าการใช้ปลั๊กอินxmleditมีประโยชน์มาก มันเพิ่มฟังก์ชั่นสองส่วน:

เมื่อคุณเปิดแท็ก ( เช่นประเภท<p>) จะขยายแท็กเร็วที่สุดเท่าที่คุณพิมพ์ปิด>ลงใน<p></p>และสถานที่เคอร์เซอร์ในแท็กในโหมดแทรก
หากคุณพิมพ์อื่นทันที>( เช่นคุณพิมพ์<p>>) มันจะขยายเป็น

<p>

</p>

และวางเคอร์เซอร์ไว้ในแท็กโดยเยื้องหนึ่งครั้งในโหมดแทรก

XMLเป็นกลุ่มปลั๊กอินเพิ่มการพับโค้ดและการจับคู่แท็กที่ซ้อนกันคุณสมบัติเหล่านี้

แน่นอนคุณไม่ต้องกังวลกับการปิดแท็กเลยหากคุณเขียนเนื้อหา HTML ของคุณในMarkdownและใช้%!เพื่อกรองบัฟเฟอร์ Vim ของคุณผ่านโปรเซสเซอร์ Markdown ที่คุณเลือก :)

— hakamadare
แหล่งที่มา

ปลั๊กอินนี้สามารถปิดแท็กอัตโนมัติเมื่อพิมพ์ "</" ได้หรือไม่ หรือเพียงแค่ใส่แท็กปิดด้วยการกดแป้นพิมพ์? บางครั้งคุณลบแท็กปิดและต้องการให้แทรกในภายหลัง ...

— bzx

7

ฉันไม่ชอบปลั๊กอินนี้เพราะไม่มีวิธีง่ายๆในการนำเคอร์เซอร์ของคุณผ่านแท็กที่สร้างขึ้น ตัวอย่างเช่นหากคุณต้องการเขียนว่า "Have a <b> nice </b> day" ให้เริ่มต้นด้วยการพิมพ์ "Have a <b> nice" ซึ่งแสดงผลเป็น "Have a <b> nice | </b> / b >" จากนั้นคุณต้องลูกศรขวาข้ามหรือออกจากโหมดแทรกเพื่อดำเนินการต่อกับส่วนที่เหลือของประโยค นั่นเป็นเหตุผลว่าทำไมวิธีที่คุณกดแป้นเพื่อแทรกแท็กปิดท้ายจึงดีกว่า

— exclipy

1

@exclipy Vim มีหลายวิธีในตัวในการทำเช่นนี้ ลองใช้คำสั่ง 'E', 'f' และ 'A' เพื่อเริ่มต้น

— user456584

3

ฉันติดตั้งปลั๊กอิน xmledit ด้วยgit clone https://github.com/sukima/xmledit.git ~/.vim/bundle/xmledit. แต่ใช้ได้เฉพาะเมื่อแก้ไขไฟล์. xml เมื่อไฟล์ ext เป็น. html หรือ. htm จะไม่ทำงาน

— ชาด

2

@Chad ปัจจุบันวิธีแก้ปัญหาของฉันคือคัดลอกวางไฟล์ในไดเร็กทอรีเดียวกันเปลี่ยนชื่อเป็น "html.vim" เพื่อให้มีผลกับไฟล์ HTML ด้วย ตอนนี้ฉันมีไฟล์เดียวกันสองไฟล์ใน ~ / .vim / ftplugin (xml.vim และ html.vim)

— user2719875

56

ฉันชอบสิ่งเล็ก ๆ น้อย ๆ

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

— SJH
แหล่งที่มา

4

<CX> <CO> ทำอะไร? มันไม่ได้ทำอะไรฉันเลย

— exclipy

8

มีหลายกรณีที่ต้องการเขียน ", /" ดังนั้นฉันจึงควรใช้ทางลัดอื่น รายละเอียดอีกประการหนึ่งคือควรปิด omni-complete โดยไม่รอการป้อนข้อมูลเพิ่มเติม ดังนั้น:imap <silent> <C-c> </<C-X><C-O><C-X>

1

เจ๋งมาก. เพิ่ม<Esc>F<iไว้ที่ส่วนท้ายของสิ่งนี้ด้วยเพื่อให้เคอร์เซอร์กลับเข้าไปในแท็ก

— mVChr

ในการใช้คำสั่งนี้ให้อยู่ในโหมดแทรกจากนั้นกด,/เพื่อปิดแท็ก

— thedanotto

วิธีแก้ปัญหาข้างต้นมีการโหวตเพิ่มขึ้นมากมาย แต่ไม่มีคำอธิบายโดยเฉพาะสำหรับมือใหม่อย่างฉัน มันทำงานอย่างไรและใช้อย่างไร?

— Phemelo Khetho

50

ฉันคิดว่ามันสะดวกกว่าที่จะทำให้กลุ่มเขียนทั้งแท็กเปิดและแท็กปิดสำหรับฉันแทนที่จะเป็นเพียงแท็กปิด คุณสามารถใช้ปลั๊กอิน ragtag ที่ยอดเยี่ยมโดย Tim Pope การใช้งานมีลักษณะดังนี้ (ให้ | ทำเครื่องหมายตำแหน่งเคอร์เซอร์) ที่คุณพิมพ์:

ช่วง |

กดCTRL+x SPACE

และคุณจะได้รับ

<span> | </ span>

คุณยังสามารถใช้CTRL+ x ENTERแทนCTRL+ x SPACEและคุณจะได้รับ

<span>
|
</ span>

Ragtag ทำอะไรได้มากกว่านั้น (เช่นใส่ <% = stuff รอบนี้%> หรือ DOCTYPE) คุณอาจต้องการตรวจสอบปลั๊กอินอื่น ๆ โดยผู้เขียนชี้โบ๊ชี้เบ๊โดยเฉพาะอย่างยิ่งรอบทิศทาง

— Krzysiek Goj
แหล่งที่มา

+1 สุดยอด! Btw ปัจจุบันนี้รู้จักกันในชื่อragtag: vim.org/scripts/script.php?script_id=1896

— neezer

อันนี้ง่ายที่สุดแน่นอน Textmate ทำได้ดี แต่ Vim เอาชนะสิ่งนี้ได้ขอบคุณ Krzysiek

— josemota

23

หากคุณกำลังทำอะไรที่ซับซ้อนประกายไฟจะดีมาก

ตัวอย่างจากไซต์ของพวกเขา:

ul > li.item-$*3 ขยายเป็น:

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

ด้วย<C-e>.

ในการทำตัวอย่างที่ให้ไว้ในคำถาม

html > head > title{This is a title}

อัตราผลตอบแทน

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

— thanthese
แหล่งที่มา

ขอบคุณมาก! นี่เจ๋งกว่าทุกสิ่งที่ฉันเคยเห็นมาก่อนไม่ใช่แค่ Vim เท่านั้น แต่ยังรวมถึงบรรณาธิการอื่น ๆ ด้วย Super!

— คริส

นี่คือปลั๊กอินที่ยอดเยี่ยม

— DenniJensen

ปลั๊กอินนี้พัฒนามาจากการเข้ารหัสแบบเซน ตอนนี้รู้จักกันในชื่อemmetและมีชุดคุณลักษณะที่ใหญ่กว่าเล็กน้อย

— chb

17

นอกจากนี้ยังมีปลั๊กอิน zencoding vim: https://github.com/mattn/zencoding-vim

บทช่วยสอน: https://github.com/mattn/zencoding-vim/blob/master/TUTORIAL

อัปเดต:ตอนนี้เรียกว่าEmmet : http://emmet.io/

ข้อความที่ตัดตอนมาจากบทช่วยสอน:

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

— ปรีดิ์กุเกรติ
แหล่งที่มา

โอ้โฮเป็นผู้สร้างทับทิม?

— tjklemz

13

การทำแผนที่

ฉันต้องการปิดแท็กบล็อกของฉัน (ตรงข้ามกับอินไลน์) ทันทีและด้วยทางลัดที่เรียบง่ายที่สุดเท่าที่จะทำได้ (ฉันชอบที่จะหลีกเลี่ยงคีย์พิเศษอย่างCTRLที่เป็นไปได้แม้ว่าฉันจะใช้closetag.vimเพื่อปิดแท็กแบบอินไลน์ก็ตาม) ฉันชอบใช้สิ่งนี้ ทางลัดเมื่อเริ่มบล็อกแท็ก (ขอบคุณ @kimilhee นี่คือการเริ่มต้นคำตอบของเขา):

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

ตัวอย่างการใช้งาน

TYPE-

<p>[Tab]

ผลลัพธ์-

<p>
 |
</p>

ที่|ระบุตำแหน่งเคอร์เซอร์

คำอธิบาย

inoremap หมายถึงสร้างการแมปในโหมดแทรก
><Tab> หมายถึงวงเล็บมุมปิดและอักขระแท็บ นี่คือสิ่งที่ตรงกัน
><Esc> หมายถึงการสิ้นสุดแท็กแรกและออกจากการแทรกในโหมดปกติ
F< หมายถึงค้นหาวงเล็บมุมเปิดสุดท้าย
l หมายถึงเลื่อนเคอร์เซอร์ไปทางขวา (อย่าคัดลอกวงเล็บมุมเปิด)
yt> หมายถึงดึงจากตำแหน่งเคอร์เซอร์ขึ้นไปจนถึงก่อนวงเล็บมุมปิดถัดไป (เช่นคัดลอกเนื้อหาแท็ก)
o</ หมายถึงเริ่มบรรทัดใหม่ในโหมดแทรกและเพิ่มวงเล็บมุมเปิดและสแลช
<C-r>" หมายถึงวางในโหมดแทรกจากการลงทะเบียนเริ่มต้น ( ")
><Esc> หมายถึงปิดแท็กปิดและออกจากโหมดแทรก
O<Space> หมายถึงเริ่มบรรทัดใหม่ในโหมดแทรกเหนือเคอร์เซอร์และแทรกช่องว่าง

— คี ธ พินสัน
แหล่งที่มา

@wds ว้าวใช่ฉันไม่เคยคิดถึงความจริงที่lหมายถึง "ขวา" ไม่ใช่ "ซ้าย" ฮ่าฮ่า ... ช่างเป็นข้อผิดพลาดที่น่าตลก คุณคิดอย่างไรกับโพสต์ของฉัน ฉันสังเกตว่าคุณไม่ได้โหวตให้คะแนน

— Keith Pinson

ดีแน่นอน ฉันเพิ่งใช้ปลั๊กอิน xml.vim เมื่อเร็ว ๆ นี้ (มันใช้งานได้ดีทีเดียว) ฉันขอแนะนำให้เพิ่มลงใน. vimrc ของคุณด้วย autocommand เฉพาะประเภทไฟล์เช่น:au filetype html inoremap <buffer> ...

— wds

1

ในที่สุดคำสั่ง Autoclose ที่ทำงานได้อย่างที่ควรจะเป็น - เพียงแค่!

— cnp

ฉันชอบให้เคอร์เซอร์อยู่ระหว่างแท็ก ก็เลยปรับเปลี่ยนให้เหมาะกับความต้องการ inoremap ><Tab> ><Esc>F<lyt>o</<C-r>"><Esc>kJxiฉันจะลบและเพิ่ม0<Space> kJxiขึ้นไป 1 ขั้นต่อสองบรรทัดต่อกันลบหนึ่งอักขระแล้วเข้าสู่โหมดแทรก

— Samundra

9

เช็คเอาท์ `vim-closetag`

เป็นสคริปต์ที่เรียบง่ายมาก (มีให้ใช้งานในรูปแบบvundleปลั๊กอิน) ที่ปิดแท็ก HTML (X) ให้คุณ จากมันREADME:

หากเป็นเนื้อหาปัจจุบัน:
<table|
ตอนนี้คุณกด>เนื้อหาจะเป็น:
<table>|</table>
และตอนนี้ถ้าคุณกด>อีกครั้งเนื้อหาจะเป็น:
<table>
   |
</table>

หมายเหตุ: |เคอร์เซอร์อยู่ที่นี่

— Sheharyar
แหล่งที่มา

6

allml (ปัจจุบันคือ Ragtag) และ Omni-complete (<CX> <CO>) ไม่ทำงานในไฟล์เช่น. py หรือ. java

หากคุณต้องการปิดแท็กโดยอัตโนมัติในไฟล์เหล่านั้นคุณสามารถแมปแบบนี้ได้

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

(^ R คือ Contrl + R: คุณสามารถพิมพ์เช่นนี้ Control + v แล้ว Control + r)

(| คือตำแหน่งเคอร์เซอร์) ตอนนี้ถ้าคุณพิมพ์ ..

<p> ABCDE |

และพิมพ์ ^ j

ก็ปิดแท็กแบบนี้ ..

<p> ABCDE </ p> |

— kimilhee
แหล่งที่มา

ด้วย imap <Cj> <ESC> mfF <lyt> `fa </ <CR>"> แท็กโคลนคือตำแหน่งที่เคอร์เซอร์อยู่เมื่อคุณพิมพ์ ^ j แทนท้ายบรรทัด ($)

— Pietro

5

นี่เป็นอีกวิธีง่ายๆที่ใช้การเขียนเว็บที่พบได้ง่าย:

ปิดแท็ก HTML โดยอัตโนมัติ

:iabbrev </ </<C-X><C-O>
กำลังเปิดการเสร็จสิ้น

autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags

— mloskot
แหล่งที่มา

1

ตอบรับสุดยอด !!! ไม่มีปลั๊กอิน !!! (รายการที่ 2 มี linkrot) อาจเป็นคำตอบที่ดีที่สุดเพราะดูเหมือนว่าจะแก้ไขได้เร็วกว่า. vimrc แทนที่จะจัดการปลั๊กอิน บวกกับการตอบสนองที่เรียบง่ายที่สุด

— nilon

เพิ่มช่องว่างหลังแท็กปิด :(

— Vitaly Zdanevich

4

จากคำตอบที่ยอดเยี่ยมโดย @KeithPinson (ขออภัยคะแนนชื่อเสียงไม่เพียงพอที่จะแสดงความคิดเห็นในคำตอบของคุณ) ทางเลือกนี้จะป้องกันไม่ให้การเติมข้อความอัตโนมัติคัดลอกสิ่งพิเศษที่อาจอยู่ในแท็ก html (เช่นคลาสรหัส ฯลฯ .) แต่ไม่ควรคัดลอกไปยังแท็กปิด

UPDATEฉันมีการปรับปรุงการตอบสนองของฉันที่จะทำงานร่วมกับfilename.html.erbไฟล์
ฉันสังเกตเห็นว่าการตอบกลับเดิมของฉันไม่ทำงานในไฟล์ที่ใช้กันทั่วไปในมุมมอง Rails เช่นsome_file.html.erbเมื่อฉันใช้ทับทิมฝังตัว (เช่น<p>Year: <%= @year %><p>) โค้ดด้านล่างจะใช้กับ.html.erbไฟล์

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

ตัวอย่างการใช้งาน

ประเภท:

<div class="foo">[Tab]

ผลลัพธ์:

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

ที่|ระบุตำแหน่งเคอร์เซอร์

และเป็นตัวอย่างของการเพิ่มแท็กปิดแบบอินไลน์แทนสไตล์บล็อก:

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

ตัวอย่างการใช้งาน

ประเภท:

<div class="foo">[Tab]

ผลลัพธ์:

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

ที่|ระบุตำแหน่งเคอร์เซอร์

เป็นความจริงที่ทั้งสองตัวอย่างข้างต้นใช้ใน>[Tab]การส่งสัญญาณแท็กปิด (หมายความว่าคุณจะต้องเลือกรูปแบบอินไลน์หรือบล็อก) ส่วนตัวผมใช้บล็อกสไตล์และแบบอินไลน์สไตล์ด้วย>[Tab]>>

— นิคเออร์ฮาร์ด
แหล่งที่มา

จะปิดแท็ก HTML ใน Vim อย่างรวดเร็วได้อย่างไร?

การทำแผนที่

ตัวอย่างการใช้งาน

คำอธิบาย

เช็คเอาท์ vim-closetag

เช็คเอาท์ `vim-closetag`