6

请注意：在 VIM 中编辑 HTML 时，我已经通过此链接跳转到 CSS 定义，但它对我没有帮助。

我希望跳转到 CSS 定义或 html 文件中的 javascript 函数。我很想在单词下方点击一个组合键来跳转到它的定义，而不仅仅是定义所在的文件。

我目前需要在打开的缓冲区中搜索单词，然后到达所需缓冲区中的所有搜索结果。这非常耗时。

请帮我解决这个非常常规的要求。

4

2 回答 2

8

这个快速而肮脏的函数似乎对 *.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>

  • 测试.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/foo.css

    .foo {
  background-color: red;
}

  • 酒吧/酒吧.css

    #bar {
  border-color: gold;
}

将光标放在 中的任何值foo或bar属性值上test.html，点击<F9>跳转到正确文件中的正确定义。可以修改该功能以拆分打开目标文件，仅搜索链接的样式表......或者被 ZyX 完全嘲笑和破坏;-)。

编辑

一些额外的指针：

  • :help iskeyword使此函数与破折号连接的名称一起使用
  • :help expand()
  • :help searchpos()以及:help search()论点的含义
  • :help starstar使用**通配符
于 2012-10-11T08:23:59.080 回答
8

我认为这应该是一个单独的答案，所以在那里。

您可以添加 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标签将包含的类.将不会起作用。最简单的解决方案是使用“regexp search”而不是“whole tag search” ：。#:tag myClass:tag .myClass: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>
于 2012-10-16T22:09:14.740 回答