Vim에서 HTML 태그를 어떻게 빨리 닫을 수 있습니까?
에서 HTML과 같은 코드를 작성해야 Vim
한지 오래되었지만 최근 에이 문제를 다시 발견했습니다. 내가 간단한 것을 쓰고 있다고 가정 해보십시오 HTML
.
<html><head><title>This is a title</title></head></html>
제목, 헤드 및 HTML에 대한 닫는 태그를 빠르게 작성하려면 어떻게합니까? 나는 여기에 하나 하나씩 작성하는 과정을 거치지 않는 정말 간단한 방법을 놓치고 있다고 생각합니다.
물론 CtrlP개별 태그 이름을 자동 완성하는 데 사용할 수 있지만 랩톱 키보드에서 나를 얻는 것은 실제로 대괄호와 슬래시를 얻는 것입니다.
이것 좀 봐..
closetag.vim
Functions and mappings to close open HTML/XML tags
https://www.vim.org/scripts/script.php?script_id=13
나는 비슷한 것을 사용합니다.
xmledit 플러그인을 사용하면 매우 유용합니다. 두 가지 기능을 추가합니다.
- 태그 ( 예 : type
<p>
) 를 열면 닫기>
를 입력하자마자 태그가 확장<p></p>
되고 삽입 모드에서 태그 내부에 커서를 놓습니다. 그런 다음 즉시 다른 유형 을 입력하면
>
( 예 : 입력<p>>
)<p>
</p>
삽입 모드에서 커서를 태그 안에 한 번 들여 쓰기합니다.
XML 정력 플러그인은 이러한 기능 코드 폴딩 및 중첩 된 태그 매칭을 추가합니다.
물론 Markdown으로 HTML 컨텐츠를 %!
작성하고 선택한 Markdown 프로세서를 통해 Vim 버퍼를 필터링 하는 데 사용 하면 태그를 닫는 것에 대해 걱정할 필요가 없습니다. :)
나는 최소한의 것을 좋아합니다.
imap ,/ </<C-X><C-O>
vim이 닫는 태그 대신 여는 태그와 닫는 태그를 모두 쓰는 것이 더 편리하다는 것을 알았습니다. Tim Pope의 훌륭한 ragtag 플러그인 을 사용할 수 있습니다 . 사용법은 다음과 같이 입력합니다 (커서 위치 표시).
스팬 |
CTRL+를 누르십시오x SPACE
그리고 당신은 얻을
<span> | </ span>
당신은 또한 사용할 수 있습니다 CTRL+ x ENTER대신 CTRL+ x SPACE, 당신은 얻을
<스팬> | </ span>
Ragtag는 단순한 것 이상을 수행 할 수 있습니다 (예 : <% = stuff of this %> 또는 DOCTYPE). ragtag 작성자 , 특히 서라운드로 다른 플러그인을 확인하고 싶을 것입니다 .
정교한 작업을 수행하는 경우 스파크 업 이 매우 좋습니다.
그들의 사이트에서 예 :
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>
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>
---------------------
매핑
블록 태그 (인라인이 아닌)를 즉시 닫고 가능한 한 간단한 바로 가기로 CTRL사용 closetag.vim
하고 싶습니다 (인라인 태그를 닫는 데 사용하지만 가능하면 특별한 키를 피하고 싶습니다 ). 태그 블록을 시작할 때 바로 가기 (@kimilhee 덕분에; 이것은 그의 답변을 벗어난 것입니다) :
inoremap ><Tab> ><Esc>F<lyt>o</<C-r>"><Esc>O<Space>
샘플 사용법
유형-
<p>[Tab]
결과-
<p>
|
</p>
여기서 |
커서 위치를 나타냅니다.
설명
inoremap
means create the mapping in insert mode><Tab>
means a closing angle brackets and a tab character; this is what is matched><Esc>
means end the first tag and escape from insert into normal modeF<
means find the last opening angle bracketl
means move the cursor right one (don't copy the opening angle bracket)yt>
means yank from cursor position to up until before the next closing angle bracket (i.e. copy tags contents)o</
means start new line in insert mode and add an opening angle bracket and slash<C-r>"
means paste in insert mode from the default register ("
)><Esc>
means close the closing tag and escape from insert modeO<Space>
means start a new line in insert mode above the cursor and insert a space
allml (now Ragtag ) and Omni-completion ( <C-X><C-O> ) doesn't work in a file like .py or .java.
if you want to close tag automatically in those file, you can map like this.
imap <C-j> <ESC>F<lyt>$a</^R">
( ^R is Contrl+R : you can type like this Control+v and then Control+r )
(| is cursor position ) now if you type..
<p>abcde|
and type ^j
then it close the tag like this..
<p>abcde</p>|
Check out vim-closetag
It's a really simple script (also available as a vundle
plugin) that closes (X)HTML tags for you. From it's README
:
If this is the current content:
<table|
Now you press >, the content will be:
<table>|</table>
And now if you press > again, the content will be:
<table> | </table>
Note: |
is the cursor here
Here is yet another simple solution based on easily foundable Web writing:
-
:iabbrev </ </<C-X><C-O>
-
autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags
Building off of the excellent answer by @KeithPinson (sorry, not enough reputation points to comment on your answer yet), this alternative will prevent the autocomplete from copying anything extra that might be inside the html tag (e.g. classes, ids, etc...) but should not be copied to the closing tag.
UPDATE I have updated my response to work with filename.html.erb
files.
I noticed my original response didn't work in files commonly used in Rails views, like some_file.html.erb
when I was using embedded ruby (e.g. <p>Year: <%= @year %><p>
). The code below will work with .html.erb
files.
inoremap ><Tab> ><Esc>?<[a-z]<CR>lyiwo</<C-r>"><Esc>O
Sample usage
Type:
<div class="foo">[Tab]
Result:
<div class="foo">
|
<div>
where |
indicates cursor position
And as an example of adding the closing tag inline instead of block style:
inoremap ><Tab> ><Esc>?<[a-z]<CR>lyiwh/[^%]><CR>la</<C-r>"><Esc>F<i
Sample usage
Type:
<div class="foo">[Tab]
Result:
<div class="foo">|<div>
where |
indicates cursor position
It's true that both of the above examples rely on >[Tab]
to signal a closing tag (meaning you would have to choose either inline or block style). Personally, I use the block-style with >[Tab]
and the inline-style with >>
.
참고URL : https://stackoverflow.com/questions/130734/how-can-one-close-html-tags-in-vim-quickly
'IT박스' 카테고리의 다른 글
캔버스 및 표면 개념 이해 (0) | 2020.07.28 |
---|---|
TemplateDoesNotExist-장고 오류 (0) | 2020.07.28 |
CRON이 올바른 경로를 호출하도록하는 방법 (0) | 2020.07.28 |
다른 테이블의 필드에서 한 테이블의 SQL 업데이트 필드 (0) | 2020.07.28 |
두 파일을 한 줄씩 비교하고 다른 파일에서 차이를 생성 (0) | 2020.07.28 |