117

Đã lâu rồi tôi không phải thực hiện bất kỳ mã giống HTML nào Vim, nhưng gần đây tôi lại bắt gặp điều này. Nói rằng tôi đang viết một số đơn giảnHTML :

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

Làm cách nào để viết các thẻ đóng đó cho tiêu đề, tiêu đề và html một cách nhanh chóng? Tôi cảm thấy như tôi đang thiếu một số cách thực sự đơn giản ở đây mà không liên quan đến việc tôi phải viết tất cả chúng ra từng cái một.

Tất nhiên tôi có thể sử dụng CtrlPđể tự động hoàn thành các tên thẻ riêng lẻ nhưng điều khiến tôi nhận được trên bàn phím máy tính xách tay của mình thực sự là dấu ngoặc và dấu gạch chéo đúng.

— wds
nguồn

38

Kiểm tra này ..

tủ quần áo.vim

Functions and mappings to close open HTML/XML tags

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

Tôi sử dụng một cái gì đó tương tự.

— Ian P
nguồn

Tôi đã cài đặt cái này. Nó không tự động hoàn thành thẻ đóng. Phím tắt là gì? Tôi cố gắng Ctrl-_, nhưng điều này làm cho phông chữ nhỏ của thiết bị đầu cuối của tôi.

— alhelal

74

Tôi thấy việc sử dụng plugin xmledit khá hữu ích. nó bổ sung thêm hai phần chức năng:

Khi bạn mở một thẻ ( ví dụ: nhập <p>), nó sẽ mở rộng thẻ ngay khi bạn nhập đóng >vào <p></p>và đặt con trỏ vào bên trong thẻ ở chế độ chèn.
Nếu sau đó bạn ngay lập tức nhập một cái khác >( ví dụ bạn nhập <p>>), nó sẽ mở rộng thành

<p>

</p>

và đặt con trỏ vào bên trong thẻ, được thụt lề một lần, ở chế độ chèn.

Các xml vim cắm thêm mã gấp và thẻ phù hợp lồng nhau để các tính năng này.

Tất nhiên, bạn không phải lo lắng về việc đóng thẻ nếu bạn viết nội dung HTML của mình trong Markdown và sử dụng %!để lọc bộ đệm Vim của bạn thông qua bộ xử lý Markdown mà bạn chọn :)

— hakamadare
nguồn

Plugin này có thể tự động đóng thẻ khi nhập '</' không? Hay chỉ chèn thẻ đóng với một số tổ hợp phím? Đôi khi bạn xóa các thẻ đóng và muốn nó chèn sau đó ...

— bzx

7

Tôi không thích plugin này vì nó không cung cấp một cách dễ dàng để đưa con trỏ của bạn qua thẻ đã tạo. Ví dụ: nếu bạn muốn viết "Chúc một ngày tốt lành </b>", bạn bắt đầu bằng cách nhập "Chúc một ngày tốt đẹp", hiển thị là "Chúc một ngày tốt lành | </ b > ". Sau đó, bạn cần phải đi qua mũi tên phải hoặc thoát khỏi chế độ chèn để tiếp tục với phần còn lại của câu. Đó là lý do tại sao một giải pháp mà bạn nhấn một phím để chèn thẻ đóng sẽ tốt hơn.

— xuất hiện

1

@exclipy Vim có rất nhiều cách tích hợp để thực hiện việc này. Hãy thử các lệnh 'E', 'f' và 'A' để bắt đầu.

— user456584,

3

Tôi đã cài đặt plugin xmledit với git clone https://github.com/sukima/xmledit.git ~/.vim/bundle/xmledit. Nhưng nó chỉ hoạt động khi chỉnh sửa tệp .xml. Khi tệp ext là .html hoặc .htm, nó không hoạt động.

— Chad

2

@Chad hiện tại, giải pháp của tôi là sao chép, dán tệp trong cùng một thư mục, đổi tên chính xác thành "html.vim" để nó cũng có tác dụng với các tệp HTML. Bây giờ, tôi có hai trong số các tệp giống hệt nhau trong ~ / .vim / ftplugin (xml.vim và html.vim).

— dùng2719875

56

Tôi thích những thứ tối thiểu,

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

— sjh
nguồn

4

<CX> <CO> làm gì? Nó không làm bất cứ điều gì cho tôi.

— exclipy

8

Có những trường hợp người ta muốn viết ", /", vì vậy tôi muốn sử dụng một phím tắt khác. Một chi tiết khác là việc hoàn thành omni nên được đóng lại, không phải chờ thêm đầu vào. Vì vậy:imap <silent> <C-c> </<C-X><C-O><C-X>

1

Rất tuyệt. Cũng được thêm vào <Esc>F<icuối phần này để nó đưa con trỏ trở lại bên trong thẻ.

— mVChr

sử dụng lệnh này ở chế độ chèn, sau đó nhấn ,/để đóng thẻ

— thedanotto

Giải pháp trên có rất nhiều ủng hộ nhưng nó thiếu giải thích, đặc biệt là đối với một người mới bắt đầu như tôi. Nó hoạt động như thế nào và sử dụng nó như thế nào?

— Phemelo Khetho

49

Tôi thấy sẽ thuận tiện hơn khi khiến vim viết cả thẻ mở và thẻ đóng cho tôi, thay vì chỉ thẻ đóng. Bạn có thể sử dụng plugin ragtag tuyệt vời của Tim Pope. Cách sử dụng trông như thế này (hãy | đánh dấu vị trí con trỏ) bạn gõ:

nhịp |

nhấn CTRL+x SPACE

và bạn nhận được

<span> | </span>

Bạn cũng có thể sử dụng CTRL+ x ENTERthay vì CTRL+ x SPACEvà bạn nhận được

<span>
|
</span>

Ragtag có thể làm được nhiều việc hơn là chỉ có nó (ví dụ: chèn <% = thứ xung quanh%> hoặc DOCTYPE này). Bạn có thể muốn xem các plugin khác của tác giả của ragtag , đặc biệt là âm thanh vòm .

— Krzysiek Goj
nguồn

+1 Tuyệt vời! Btw, điều này hiện nay được gọi là ragtag: vim.org/scripts/script.php?script_id=1896

— neezer

Cái này chắc chắn là đơn giản nhất. Textmate đã có nó tốt, nhưng Vim đánh bại nó với điều này, cảm ơn Krzysiek.

— josemota,

23

Nếu bạn đang làm bất cứ điều gì phức tạp, sparkup là rất tốt.

Một ví dụ từ trang web của họ:

ul > li.item-$*3 mở rộng thành:

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

với a <C-e>.

Để làm ví dụ được đưa ra trong câu hỏi,

html > head > title{This is a title}

hoa lợi

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

— hơn những thứ này
nguồn

Cảm ơn bạn rất nhiều! Điều này thú vị hơn bất cứ thứ gì tôi đã thấy trước đây, không chỉ Vim mà còn giữa bất kỳ trình chỉnh sửa nào khác! Siêu!

— Chris

Đây là một plugin tuyệt vời

— DenniJensen

Plugin này phát triển từ mã hóa zen. Cái thứ hai bây giờ được gọi là emmet và có một bộ tính năng lớn hơn một chút.

— chb

17

Ngoài ra còn có một plugin zencoding vim: https://github.com/mattn/zencoding-vim

hướng dẫn: https://github.com/mattn/zencoding-vim/blob/master/TUTORIAL

Cập nhật: cái này bây giờ được gọi là Emmet : http://emmet.io/

Một đoạn trích từ hướng dẫn:

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

— Đặt trước Kukreti
nguồn

whoa, đó là của người tạo ra ruby?

— tjklemz

13

Lập bản đồ

Tôi muốn đóng các thẻ khối của mình (trái ngược với nội tuyến) ngay lập tức và bằng một phím tắt đơn giản nhất có thể (tôi muốn tránh các phím đặc biệt CTRLnếu có thể, mặc dù tôi sử dụng closetag.vimđể đóng các thẻ nội tuyến của mình.) Tôi thích sử dụng điều này phím tắt khi bắt đầu các khối thẻ (cảm ơn @kimilhee; đây là phần tiếp theo câu trả lời của anh ấy):

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

Sử dụng mẫu

Kiểu-

<p>[Tab]

Kết quả-

<p>
 |
</p>

nơi |chỉ ra vị trí con trỏ.

Giải trình

inoremap có nghĩa là tạo ánh xạ trong chế độ chèn
><Tab> có nghĩa là một dấu ngoặc nhọn đóng và một ký tự tab; đây là những gì phù hợp
><Esc> nghĩa là kết thúc thẻ đầu tiên và thoát khỏi chèn vào chế độ bình thường
F< nghĩa là tìm dấu ngoặc nhọn mở cuối cùng
l có nghĩa là di chuyển con trỏ sang phải (không sao chép dấu ngoặc nhọn mở)
yt> có nghĩa là kéo từ vị trí con trỏ trở lên cho đến trước dấu ngoặc nhọn đóng tiếp theo (tức là sao chép nội dung thẻ)
o</ có nghĩa là bắt đầu dòng mới ở chế độ chèn và thêm dấu ngoặc nhọn và dấu gạch chéo góc mở
<C-r>" nghĩa là dán trong chế độ chèn từ thanh ghi mặc định ( ")
><Esc> có nghĩa là đóng thẻ đóng và thoát khỏi chế độ chèn
O<Space> có nghĩa là bắt đầu một dòng mới trong chế độ chèn phía trên con trỏ và chèn một khoảng trắng

— Keith Pinson
nguồn

@wds Wow, vâng, tôi chưa bao giờ nghĩ về thực tế lcó nghĩa là "phải" chứ không phải "trái", haha ... thật là một lỗi buồn cười. Bạn nghĩ gì về bài viết của tôi? Tôi nhận thấy bạn đã không ủng hộ.

— Keith Pinson

Chắc chắn là đẹp. Gần đây tôi đã sử dụng plugin xml.vim (nó hoạt động khá tốt). Tôi sẽ đề nghị thêm nó vào vimrc của bạn với một autocommand filetype cụ thể, ví dụ:au filetype html inoremap <buffer> ...

— WDS

1

Cuối cùng, một lệnh Autoclose hoạt động chính xác như nó cần - đơn giản!

— cnp

Tôi muốn giữ con trỏ của mình ở giữa các thẻ. Vì vậy, tôi đã sửa đổi nó cho phù hợp với nhu cầu của tôi. inoremap ><Tab> ><Esc>F<lyt>o</<C-r>"><Esc>kJxiTôi loại bỏ 0<Space>và thêm vào kJxi. Đi lên 1 bước, nối hai dòng, xóa một ký tự rồi chuyển sang chế độ chèn.

— Samundra

9

Thủ tục thanh toán `vim-closetag`

Đó là một tập lệnh thực sự đơn giản (cũng có sẵn dưới dạng vundleplugin) đóng (X) các thẻ HTML cho bạn. Từ nó README:

Nếu đây là nội dung hiện tại:
<table|
Bây giờ bạn bấm >, nội dung sẽ là:
<table>|</table>
Và bây giờ nếu bạn nhấn >lại, nội dung sẽ là:
<table>
   |
</table>

Lưu ý: |là con trỏ ở đây

— Sheharyar
nguồn

6

allml (bây giờ là Ragtag) và Omni-complete (<CX> <CO>) không hoạt động trong tệp như .py hoặc .java.

nếu bạn muốn tự động đóng thẻ trong tệp đó, bạn có thể ánh xạ như thế này.

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

(^ R là Contrl + R: bạn có thể gõ như thế này Control + v rồi đến Control + r)

(| là vị trí con trỏ) ngay bây giờ nếu bạn nhập ..

<p> abcde |

và gõ ^ j

sau đó nó đóng thẻ như thế này ..

<p> abcde </p> |

— kimilhee
nguồn

với imap <Cj> <ESC> MFF <lyt> `fa </ <CR>"> thẻ clonsing là nơi con trỏ là khi bạn đã gõ ^ j thay vì cuối dòng ($)

— Pietro

5

Đây là một giải pháp đơn giản khác dựa trên cách viết trên Web dễ tìm thấy:

Tự động đóng thẻ HTML

:iabbrev </ </<C-X><C-O>
Đang bật tính năng hoàn thành

autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags

— mloskot
nguồn

1

Phản hồi tuyệt vời !!! không có plugin !!! (Mục thứ 2 có linkrot) có lẽ vẫn là câu trả lời hay nhất, bởi vì việc sửa đổi .vimrc có vẻ nhanh hơn thay vì xử lý các plugin. Ngoài ra hầu hết nhỏ gọn phản ứng

— nilon

Điều này thêm không gian sau thẻ đóng :(

— Vitaly Zdanevich

4

Dựa trên câu trả lời xuất sắc của @KeithPinson (xin lỗi, chưa đủ điểm danh tiếng để nhận xét về câu trả lời của bạn), phương án thay thế này sẽ ngăn tự động hoàn thành sao chép bất kỳ thứ gì bổ sung có thể có bên trong thẻ html (ví dụ: lớp, id, v.v. .) nhưng không được sao chép vào thẻ đóng.

CẬP NHẬT Tôi đã cập nhật phản hồi của mình để làm việc với filename.html.erbcác tệp.
Tôi nhận thấy phản hồi ban đầu của mình không hoạt động trong các tệp thường được sử dụng trong dạng xem Rails, như some_file.html.erbkhi tôi đang sử dụng ruby được nhúng (ví dụ <p>Year: <%= @year %><p>:). Đoạn mã dưới đây sẽ hoạt động với .html.erbcác tệp.

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

Sử dụng mẫu

Kiểu:

<div class="foo">[Tab]

Kết quả:

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

nơi |chỉ ra vị trí con trỏ

Và như một ví dụ về việc thêm nội dòng thẻ đóng thay vì kiểu khối:

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

Sử dụng mẫu

Kiểu:

<div class="foo">[Tab]

Kết quả:

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

nơi |chỉ ra vị trí con trỏ

Đúng là cả hai ví dụ trên dựa vào >[Tab]để báo hiệu một thẻ đóng (có nghĩa là bạn sẽ phải chọn một trong hai nội tuyến hoặc chặn phong cách). Cá nhân tôi sử dụng kiểu khối với >[Tab]và kiểu nội tuyến với >>.

— Nick Erhardt
nguồn

Làm cách nào để có thể đóng các thẻ HTML trong Vim một cách nhanh chóng?

Lập bản đồ

Sử dụng mẫu

Giải trình

Thủ tục thanh toán vim-closetag

Thủ tục thanh toán `vim-closetag`