使用单个按键在Vim中从HTML文件跳转到CSS文件中的CSS选择器。

Question

使用单个按键在Vim中从HTML文件跳转到CSS文件中的CSS选择器。

javascripthtmlcssvimide

7

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

我想跳转到CSS定义或者说是从html文件跳转到JavaScript函数。我想按下一个快捷键就能跳转到它的定义，而不仅仅是定位到定义所在的文件。

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

请帮助我实现这个非常常见的需求。

- Gattoo

我从未使用过它，但是有一个补丁可以实现ctags对CSS的支持。通过这个补丁，您可以生成一个TAGS文件，并使用它来跳转到定义。 - Randy Morris

neovim的版本解决方案怎么样？ - Steve YN

2个回答

8

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

你可以给ctags添加CSS支持，并使用它来跳转到定义，就像你为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/

完成后，典型的：！ctags-R。将正确索引您的CSS文件，您将能够执行：tag .myClass以跳转到正确的CSS定义和正确的CSS文件。

但是有一个问题。类和IDs标记将包括它们的。或#，因此：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>

- romainl

看起来是个不错的技巧。等我完全掌握ctags后再试试，有关ctags的任何参考资料吗？这样我就可以更深入地了解ctag的功能了。 - Gattoo

这很聪明。匆忙处理并不是一个好主意。:help tags 包含了你需要的所有 Vim 工作流程，而 $man ctags 则包含了其他所有内容。 - romainl

3

我已更新以上代码，以支持 SCSS 标记：https://gist.github.com/dreki/da853aeb4d80c03a4448 - duma

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- romainl · Accepted Answer

这个快速而简单的函数似乎可以解决*.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/foo.css
```
.foo {
  background-color: red;
}
```
bar/bar.css
```
#bar {
  border-color: gold;
}
```

在test.html中，将光标放置于任何foo或bar属性值上，按下键即可跳转到正确的定义文件。该函数可以被修改为在分割窗格中打开目标文件、仅搜索链接的样式表... 或者被ZyX彻底嘲笑和摧毁 ;-)

编辑：

一些额外的指针：

- 使用：help iskeyword 来使该函数适用于使用连字符连接的名称。 - 使用：help expand()。 - 使用：help searchpos() 和：help search() 来查找参数的含义。 - 使用：help starstar 来了解**通配符的用法。