Gat*_*too 4 html javascript css ide vim
请注意:我在VIM中编辑HTML时已经通过此链接跳转到CSS定义,但它无法帮助我.
我希望从html文件跳转到CSS定义或javascript函数.我想在单词下面点击一个关键组合来跳转到它的定义,而不仅仅是定义所在的文件.
我目前需要在打开的缓冲区中搜索单词,然后到达所需缓冲区中的所有搜索结果.这非常耗时.
请帮我解决这个非常规的要求.
这个快速而肮脏的功能似乎可以解决*.html - >*.css:
function! JumpToCSS()
let id_pos = searchpos("id", "nb", line('.'))[1]
let class_pos = searchpos("class", "nb", line('.'))[1]
if class_pos > 0 || id_pos > 0
if class_pos < id_pos
execute ":vim '#".expand('<cword>')."' **/*.css"
elseif class_pos > id_pos
execute ":vim '.".expand('<cword>')."' **/*.css"
endif
endif
endfunction
nnoremap <F9> :call JumpToCSS()<CR>
的test.html
<html>
<body>
<div class="foo" id="bar">lorem</div>
<div id="bar" class="foo">ipsum</div>
<div id="bar">dolor</div>
<div class="foo">sit</div>
</body>
</html>
富/ foo.css
.foo {
background-color: red;
}
酒吧/ bar.css
#bar {
border-color: gold;
}
将光标放在任何foo或bar属性值上test.html,点击<F9>跳转到右侧文件中的右侧定义.可以修改该函数以在拆分中打开目标文件,仅搜索链接的样式表......或者被ZyX完全嘲笑和销毁;-).
编辑
一些额外的指示:
:help iskeyword 此函数使用短划线连接的名称:help expand():help searchpos()以及:help search()争论的含义:help starstar用于使用**通配符我认为这应该是一个单独的答案所以,那里.
您可以添加CSS支持ctags并使用它以与JavaScript相同的方式跳转到定义.就像在~/.ctags文件中添加以下行一样简单:
--langdef=css
--langmap=css:.css
--regex-css=/^[ \t]*\.([A-Za-z0-9_-]+)/.\1/c,class,classes/
--regex-css=/^[ \t]*#([A-Za-z0-9_-]+)/#\1/i,id,ids/
--regex-css=/^[ \t]*(([A-Za-z0-9_-]+[ \t\n,]+)+)\{/\1/t,tag,tags/
--regex-css=/^[ \t]*@media\s+([A-Za-z0-9_-]+)/\1/m,media,medias/
一旦完成,clasic :!ctags -R .将正确索引您的CSS文件,您将能够:tag .myClass在正确的CSS文件中跳转到正确的CSS定义.
但是有一个问题.该班的IDS标签将包括他们.或#因此:tag myClass将无法同时工作:tag .myClass的意愿.最简单的解决方案是使用"regexp search"而不是"整个标记搜索"::tag /myClass.
这两个映射完美无缺(对于JS有一段时间和CSS几天):
" alternative to <C-]>
" place your cursor on an id or class and hit <leader>]
" to jump to the definition
nnoremap <leader>] :tag /<c-r>=expand('<cword>')<cr><cr>
" alternative to <C-w>}
" place your cursor on an id or class and hit <leader>}
" to show a preview of the definition. This doesn't seem to be
" very useful for CSS but it rocks for JavaScript
nnoremap <leader>} :ptag /<c-r>=expand('<cword>')<cr><cr>