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

请注意：我已经通过这个链接，但它不能帮助我

我希望跳转到CSS定义，或者从html文件中跳转到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>

bar/bar.css

.foo {
  background-color: red;
}

#bar {
  border-color: gold;
}

将光标放在

test.html

中的任何

foo

或

bar

属性值上，点击

将跳转到正确文件中的正确定义。该函数可以修改为在拆分中打开目标文件，只搜索链接的样式表…或者被ZyX完全嘲笑和销毁；-）

编辑

另外还有几个要点：

• ：帮助iskeyword

  ，用于此函数与短划线连接的名称一起使用

• ：帮助展开（）

• ：help searchpos（）

  和

  ：help search（）

  了解参数的含义

• ：帮助starstar使用
  **
  通配符

---

我认为这应该是一个单独的答案，所以，这里
您可以向

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/

完成后，clasic

：！ctags-R.

将正确索引CSS文件，您可以执行

：tag.myClass

跳转到正确CSS文件中的正确CSS定义
不过有一个陷阱。ids标记的类将包括它们的
或
因此

:tag myClass

将不起作用，而

:tag.myClass

将起作用。最简单的解决方案是使用“regexp搜索”而不是“整个标记搜索”：

：tag/myClass

这两个映射已经完美地工作了（JS已经有一段时间了，CSS也已经有几天了）：

“替代
“将光标放在id或类上并点击]
“跳到定义上来
nnoremap]：标记/=展开（“”）
“替代}
“将光标放在id或类上并点击}”
“以显示定义的预览。这似乎不太可能
“对CSS非常有用，但对JavaScript却很有用
nnoremap}:ptag/=展开（“”）

谢谢@romainl。让我检查一下。它如何找到正确的css文件？是否需要在缓冲区中打开它？

：vim.foo'*.css

（

：vim

是

：vimgrep

的缩写）在工作目录中的每个CSS文件中以非递归方式搜索

foo

。

***/

被添加来告诉vim以递归方式进行搜索。它不关心打开的缓冲区。对于单词中不带“-”或“2;”的简单搜索，如navbar inner，其效果与charm类似（即使是单词技巧下的Vim*也不允许连字符或下划线字符）。必须以“在新选项卡中打开目标”为基础，并搜索整个单词作为默认值。它让我们深入了解Vim脚本的强大世界，以获得您想要的任何内容。再次感谢@romainl。您对脚本的解释非常棒。默认情况下，

iskeyword

中不包含破折号。您可以使用明确添加破折号de>设置iskeyword+=-。如果您临时在函数或vimrc中这样做，此函数将与

导航栏内部

一样工作。我不会删除Command-t或CTrlP之类的内容，但Vim有很多很酷的技巧，如您所见，您可以自己添加自己的技巧。

：e**/foo

对于编辑文件非常有效，

：b/bar

对于跳转到缓冲区也同样有效…我从来没有使用过它，但是ctags有一个补丁实现css支持。通过这个补丁，你可以生成一个标签文件并使用它跳转到定义。这看起来是一个不错的技巧。让我在稍后的阶段看看，当我全面了解ctag。有关于ctag的任何参考资料，所以我会更多地探索ctag功能吗？这很聪明。这不是一个很好的主意。

：帮助标签

提供了以Vim为中心的工作流所需的一切，

$man ctag

提供了所有其他内容。我更新了上述代码以提供SCSS标签支持：

--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/

" 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>