কীভাবে একজন ভিমে এইচটিএমএল ট্যাগগুলি দ্রুত বন্ধ করতে পারেন?


117

আমাকে এইচটিএমএল-জাতীয় কোড করতে হয়েছিল Vim, এর পরে কিছুটা সময় হয়েছে, তবে সম্প্রতি আমি এটি আবার এসেছি। বলুন আমি কিছু সহজ লিখছি HTML:

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

আমি কীভাবে শিরোনাম, মাথা এবং এইচটিএমএল জন্য দ্রুত এই ক্লোজিং ট্যাগগুলি লিখতে পারি? আমার মনে হচ্ছে আমি এখানে কিছু সহজ উপায় মিস করছি যা আমাকে একে একে লিখে লিখে জড়িত করে না।

অবশ্যই আমি CtrlPস্বতন্ত্র ট্যাগ নামগুলি স্বতঃপূর্ণ করতে ব্যবহার করতে পারি তবে আমার ল্যাপটপের কীবোর্ডে আমাকে কী পাওয়া যায় তা আসলে বন্ধনীগুলি পেয়ে যায় এবং ডানদিকে স্ল্যাশ হয়।

উত্তর:


38

এটা দেখ..

closetag.vim

Functions and mappings to close open HTML/XML tags

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

আমি অনুরূপ কিছু ব্যবহার।


আমি এটি ইনস্টল করেছি। এটি স্বয়ংক্রিয়ভাবে বন্ধ ট্যাগটি সম্পন্ন করে না the শর্টকি কী? আমি চেষ্টা করি Ctrl-_, তবে এটি আমার টার্মিনালের ছোট ফন্ট তৈরি করে।
আলহালাল

74

আমি xmledit প্লাগইন ব্যবহার বেশ কার্যকর। এটি কার্যকারিতা দুটি টুকরা যোগ করে:

  1. যখন আপনি একটি ট্যাগ (খুলুন যেমন টাইপ <p>), এটি শীঘ্রই আপনি ক্লোজিং টাইপ যতটা ট্যাগ বিস্তৃতি >মধ্যে <p></p>এবং সন্নিবেশ মোডে ট্যাগ ভিতরে কার্সার স্থাপন করা হয়।
  2. এরপরে যদি আপনি তাত্ক্ষণিকভাবে অন্য কোনও টাইপ করেন >( যেমন আপনি টাইপ করেন <p>>) তবে এটি এতে প্রসারিত হয়

    <p>

    </p>

এবং কার্সারটিকে ট্যাগের ভিতরে রাখে, একবার indোকানো মোডে ইন্ডেন্ট করা।

XML তেজ প্লাগইন কোড ভাঁজ এবং এই বৈশিষ্ট্য নেস্টেড ট্যাগ ম্যাচিং যোগ করা হয়েছে।

অবশ্যই, আপনি যদি মারকডাউনে আপনার এইচটিএমএল বিষয়বস্তু লিখেন এবং %!আপনার পছন্দের মার্কডাউন প্রসেসরের মাধ্যমে আপনার ভিম বাফারটি ফিল্টার করতে ব্যবহার করেন তবে আপনি ট্যাগগুলি বন্ধ করার বিষয়ে মোটেও চিন্তা করার দরকার নেই :)


'</' টাইপ করা হলে এই প্লাগইনটি কি স্বয়ংক্রিয়ভাবে ট্যাগগুলি ট্যাগ করতে পারে? বা কিছু কিস্ট্রোক দিয়ে ক্লোজিং ট্যাগটি সন্নিবেশ করাবেন? কখনও কখনও আপনি সমাপনী ট্যাগটি মুছুন এবং এটি পরে সন্নিবেশ করতে চান ...
বিজেএক্স

7
আমি এই প্লাগইনটি পছন্দ করি না কারণ এটি আপনার উত্সাহিত ট্যাগের কার্সরটিকে অতীতে পাওয়ার সহজ উপায় সরবরাহ করে না। উদাহরণস্বরূপ, আপনি যদি "হ্যাভ এ <b> সুন্দর </ b> দিন" লিখতে চান তবে আপনি "হ্যাভ এ <b> সুন্দর" টাইপ করে শুরু করবেন, যা "হ্যাভ এ <b> দুর্দান্ত | </ b" হিসাবে রেন্ডার করে > "। তারপরে বাকী বাক্যটি চালিয়ে যাওয়ার জন্য আপনাকে উভয়দিকে ডান-তীর পাতানো বা সন্নিবেশ মোড থেকে প্রস্থান করতে হবে। এজন্য আপনি শেষ ট্যাগটি সন্নিবেশ করানোর জন্য আপনি কীটি টিপুন এমন সমাধান আরও ভাল।
এক্সক্লুপি

1
@ এক্সক্লিপি ভিমে এটি করার জন্য প্রচুর অন্তর্নির্মিত উপায় রয়েছে। শুরু করার জন্য 'E', 'f', এবং 'A' কমান্ড ব্যবহার করে দেখুন।
ব্যবহারকারী 456584

3
আমি এর সাথে xmledit প্লাগইন ইনস্টল করেছি git clone https://github.com/sukima/xmledit.git ~/.vim/bundle/xmledit। তবে এটি শুধুমাত্র .xML ফাইল সম্পাদনা করার সময় কাজ করে। যখন ফাইলটি .html বা .htm হয় তখন এটি কার্যকর হয় না।
চাদ

2
@ চ্যাড বর্তমানে, আমার সমাধানটি হ'ল একই ডিরেক্টরিতে থাকা ফাইলটি অনুলিপি করে একে একে ঠিক "html.vim" নামকরণ করুন যাতে এটি এইচটিএমএল ফাইলগুলিকেও প্রভাবিত করে। এখন, আমার কাছে same / .vim / ftplugin (xML.vim এবং html.vim) এ একই একই দুটি ফাইল রয়েছে।
ব্যবহারকারী 2719875

56

আমি ন্যূনতম জিনিস পছন্দ করি,

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

4
<CX> <CO> কি করবে? এটা আমার জন্য কিছু করে না।
এক্সপ্লিপি

8
এমন কেস রয়েছে যেখানে কেউ ", /" লিখতে চান, তাই আমি বরং আলাদা শর্টকাট ব্যবহার করতাম। আরেকটি বিশদটি হ'ল ওমনি-সমাপ্তিটি বন্ধ করা উচিত, অতিরিক্ত ইনপুটটির জন্য অপেক্ষা না করে। সুতরাং:imap <silent> <C-c> </<C-X><C-O><C-X>

1
খুব ঠান্ডা. <Esc>F<iএটি এর শেষে যুক্ত করা হয়েছে যাতে এটি কার্সারটিকে ট্যাগের মধ্যে রাখে।
এমভিসিএইচআর

এই কমান্ডটি সন্নিবেশ মোডে রাখতে ব্যবহার করুন, তারপরে ,/ট্যাগটি বন্ধ করতে
চাপুন

উপরের সমাধানটিতে প্রচুর পরিমাণে উদ্দীপনা রয়েছে তবে এটি আমার মতো শিক্ষানবিশদের জন্য ব্যাখ্যাটির অভাব রয়েছে। এটি কীভাবে কাজ করে এবং কীভাবে এটি ব্যবহার করে?
ফেমেলো খেঠো

49

আমি আমার কাছে খালি এবং ক্লোজিং ট্যাগটি কেবল বন্ধ করার পরিবর্তে ভিএম লিখতে আরও বিশ্বাসযোগ্য মনে করি। আপনি টিম পোপ দ্বারা দুর্দান্ত ragtag প্লাগইন ব্যবহার করতে পারেন । ব্যবহারগুলি আপনার টাইপের মতো (আসুন | চিহ্নিত কর্সার অবস্থানে চিহ্নিত করুন):

বিঘত |

চাপুন CTRL+x SPACE

এবং আপনি পেতে

<Span> এ | </ span> এ

এছাড়াও আপনি ব্যবহার করতে পারেন CTRL+ + x ENTERপরিবর্তে CTRL+ + x SPACE, এবং আপনি পেতে

<Span> এর
|
</ Span> এ

রাগটাগ কেবল এটির চেয়েও বেশি কিছু করতে পারে (উদাঃ <% = এই% এর شاوخوا>> বা ডক্টইপিই) .োকান)। আপনি সম্ভবত রাগট্যাগের লেখক দ্বারা অন্য প্লাগইনগুলি পরীক্ষা করে দেখতে চান , বিশেষত চারপাশে


+1 দুর্দান্ত! বিটিডব্লিউ, এটি এখন পরিচিত ragtag: vim.org/scriptts/script.php?script_id=1896
নীজার

এটি অবশ্যই সহজতম। পাঠ্যসামগ্রীর পক্ষে এটি ভাল ছিল, তবে ক্রিমিসিকে ধন্যবাদ ভিম এটিকে মারধর করেছেন।
জোসেমোটা

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>

আপনাকে অনেক ধন্যবাদ! আমি এর আগে যা দেখেছি তার চেয়ে এটি শীতল, কেবল ভিম নয় অন্য কোনও সম্পাদকের মধ্যে! সুপার!
ক্রিস

এটি একটি দুর্দান্ত প্লাগইন
ডেন্নি জেনসেন

এই প্লাগইনটি জেন-কোডিং থেকে বিকশিত হয়েছিল। পরেরটি এখন এমমেট হিসাবে পরিচিত এবং এতে কিছুটা বড় বৈশিষ্ট্য সেট রয়েছে।
chb

17

একটি জেনকোডিং ভিম প্লাগইন রয়েছে: https://github.com/mattn/zencoding-vim

টিউটোরিয়াল: https://github.com/mattn/zencoding-vim/blob/master/TUTORIAL


আপডেট: এটি এখন এমমেট বলা হয় : 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আমার ইনলাইন ট্যাগগুলি বন্ধ করতে ব্যবহার করি) আমি এটি ব্যবহার করতে পছন্দ করি ট্যাগগুলির ব্লকগুলি শুরু করার সময় শর্টকাট (@ কিমিলি ধন্যবাদ; এটি তার উত্তরের একটি গ্রহণযোগ্যতা):

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> মানে কার্সারের উপরে সন্নিবেশ মোডে একটি নতুন লাইন শুরু করুন এবং একটি স্থান সন্নিবেশ করান

@ ওড্ডস বাহ, হ্যাঁ, আমি l"ডান" এবং "বাম" নয়, এমন সত্য সম্পর্কে কখনই ভাবিনি ... হাহা ... কি মজার ত্রুটি। আপনি আমার পোস্ট সম্পর্কে কি মনে করেন? আমি খেয়াল করেছিলাম আপনি উঁচুতে যান নি।
কিথ পিনসন

নিশ্চিত ভাল লাগল আমি সম্প্রতি xML.vim প্লাগইন ব্যবহার করতে নিয়েছি (এটি বেশ সুন্দরভাবে কাজ করে)। আমি এটিকে আপনার .vimrc এ একটি ফাইল টাইপ-নির্দিষ্ট অটোকমন্ডের সাথে যুক্ত করার পরামর্শ দেব, যেমন:au filetype html inoremap <buffer> ...
wds

1
অবশেষে একটি অটোক্লোজ কমান্ড যা ঠিক যেমনটি করা উচিত ঠিক তেমন কাজ করে - সহজভাবে!
সিএনপি

আমি আমার কার্সারটিকে ট্যাগের মধ্যে রাখতে চাই। সুতরাং আমি আমার প্রয়োজন অনুসারে এটি পরিবর্তন করেছি। inoremap ><Tab> ><Esc>F<lyt>o</<C-r>"><Esc>kJxiআমি অপসারণ 0<Space>এবং যোগ kJxi। 1 ধাপ উপরে যান, দুটি লাইন যুক্ত করুন, একটি অক্ষর সরান তারপর সন্নিবেশ মোডে যান।
সমুদ্র

9

চেক আউট vim-closetag

এটি সত্যিই একটি সহজ স্ক্রিপ্ট ( vundleপ্লাগইন হিসাবে উপলভ্য ) যা আপনার জন্য (এক্স) এইচটিএমএল ট্যাগগুলি বন্ধ করে দেয়। এটি থেকে README:

যদি এটি বর্তমান সামগ্রী হয়:

<table|

এখন আপনি টিপুন >, বিষয়বস্তু হবে:

<table>|</table>

এবং এখন আপনি যদি >আবার টিপেন তবে বিষয়বস্তুটি হ'ল:

<table>
   |
</table>

দ্রষ্টব্য: |এখানে কার্সার


6

AllML (এখন রাগতাগ) এবং ওমনি-সমাপ্তি (<CX> <CO>) .py বা। জাভা এর মতো কোনও ফাইলে কাজ করে না।

আপনি যদি এই ফাইলটিতে স্বয়ংক্রিয়ভাবে ট্যাগটি বন্ধ করতে চান তবে আপনি এটির মতো ম্যাপ করতে পারেন।

ইম্যাপ <Cj> <ESC> এফ <lyt> $ আ </ ^ আর ">

(^ আর কনট্রোল + আর: আপনি এই নিয়ন্ত্রণ + ভি এবং তারপরে নিয়ন্ত্রণ + আর এর মতো টাইপ করতে পারেন)

(| কার্সারের অবস্থান) এখন আপনি টাইপ করুন ..

<P> যে abcde |

এবং টাইপ করুন জে

তারপরে এটি ট্যাগটির মতো বন্ধ করে দেয় ..

<P> যে abcde? </ P> |


ইম্যাম্পের সাথে <সিজে> <ESC> এমএফএফ <lyt> `ফা </ <CR>"> ক্লোনসিং ট্যাগটি যেখানে কর্নারটি ছিল যখন আপনি লাইনের শেষের ($) এর পরিবর্তে ^ j টাইপ করেছিলেন
পিট্রো

5

সহজেই সন্ধানযোগ্য ওয়েব লেখার উপর ভিত্তি করে এখানে আরও একটি সহজ সমাধান রয়েছে:

  1. একটি HTML ট্যাগ স্বয়ংক্রিয়ভাবে বন্ধ করা হচ্ছে

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

  2. চালু হচ্ছে সম্পূর্ণ

    autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags


1
দুর্দান্ত প্রতিক্রিয়া !!! কোন প্লাগইন সহ !!! (২ য় আইটেমটির লিঙ্ক্রোট রয়েছে) এখনও সম্ভবত সর্বোত্তম উত্তর, কারণ প্লাগইনগুলি পরিচালনা করার চেয়ে .vimrc পরিবর্তন করা আরও দ্রুত বলে মনে হচ্ছে। প্লাস সর্বাধিক সংক্ষিপ্ত প্রতিক্রিয়া
নীলন

এটি বন্ধ ট্যাগের পরে স্থান যুক্ত করে :(
ভাইটালি জাদানেভিচ

4

@ কিথপিনসন দ্বারা দুর্দান্ত উত্তরের বাইরে (দুঃখিত, আপনার উত্তর সম্পর্কে মন্তব্য করার জন্য যথেষ্ট খ্যাতি পয়েন্ট নয়), এই বিকল্পটি স্বতঃসম্পূর্ণ এইচটিএমএল ট্যাগের অভ্যন্তরে থাকা অতিরিক্ত কিছু অনুলিপি করা থেকে বিরত রাখবে (উদাহরণস্বরূপ শ্রেণি, আইডি, ইত্যাদি ..) ।) তবে ক্লোজিং ট্যাগে অনুলিপি করা উচিত নয়।

আপডেট আমি filename.html.erbফাইলের সাথে কাজ করার জন্য আমার প্রতিক্রিয়া আপডেট করেছি ।
আমি লক্ষ্য করেছি যে আমার আসল প্রতিক্রিয়াগুলি রেল ভিউগুলিতে সাধারণত ব্যবহৃত ফাইলগুলিতে কাজ করে না, যেমন 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]এবং এর সাথে ইনলাইন-শৈলী ব্যবহার করি >>

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.