使用单次击键从 Vim 中的 HTML 文件跳转到 CSS 文件中的 CSS 选择器

2023-10-02前端开发问题
4

本文介绍了使用单次击键从 Vim 中的 HTML 文件跳转到 CSS 文件中的 CSS 选择器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

请注意:我已经通过此链接 跳转到在 VIM 中编辑 HTML 时的 CSS 定义,但对我没有帮助.

Please note: I have been through this link Jump to CSS definition when editing HTML in VIM, but it couldn't help me.

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

I am looking to jump to the CSS definition or for that matter a javascript function from the html file. I would love to hit a key combo below the word to jump to its definition, not just the file in which the definition resides.

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

I currently need to search the word in opened buffers and then reach to all the search results in the required buffer. It is very time consuming.

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

Please help me with this very regular requirement.

推荐答案

这个快速而肮脏的函数似乎对 *.html -> *.css 有用:

This quick and dirty function seems to do the trick for *.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 中的任意 foobar 属性值上,点击 <F9> 跳转到正确文件中的正确定义.可以修改该函数以拆分打开目标文件,仅搜索链接的样式表……或者被 ZyX 完全嘲笑和破坏;-).

    With the cursor on any foo or bar attribute value in test.html, hitting <F9> jumps to the right definition in the right file. The function could be modified to open the target file in a split, search only the linked stylesheets… or be completely ridiculed and destroyed by ZyX ;-).

    编辑

    一些额外的指针:

    • :help iskeyword 让这个函数使用破折号连接的名字
    • :help expand()
    • :help searchpos():help search() 了解参数的含义
    • :help starstar 用于使用 ** 通配符
    • :help iskeyword for this function to work with dash-joined names
    • :help expand()
    • :help searchpos() and :help search() for the meanings of the arguments
    • :help starstar for the use of the ** wildcard

    这篇关于使用单次击键从 Vim 中的 HTML 文件跳转到 CSS 文件中的 CSS 选择器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

    The End

相关推荐

如何使用百度地图API获取地理位置信息
首先,我们需要在百度地图开放平台上申请一个开发者账号,并创建一个应用。在创建应用的过程中,我们会得到一个密钥(ak),这是调用API的凭证。 接下来,我们需要准备一个PHP文件,以便可以在网页中调用。首先,我们需要引入百度地图API的JS文件,代码如下...
2024-11-22 前端开发问题
244

js删除数组中指定元素的5种方法
在JavaScript中,我们有多种方法可以删除数组中的指定元素。以下给出了5种常见的方法并提供了相应的代码示例: 1.使用splice()方法: let array = [0, 1, 2, 3, 4, 5];let index = array.indexOf(2);if (index -1) { array.splice(index, 1);}// array = [0,...
2024-11-22 前端开发问题
182

layui 实现实时刷新一个外部的div
主页面上显示了一个合计,在删除和增加的时候需要更改这个总套数的值: //html代码div class="layui-inline layui-show-xs-block" style="margin-left: 10px" id="sumDiv"spanSOP合计:/spanspan${totalNum}/spanspan套/span/div 于是在我们删除这个条数据后,...
2024-11-14 前端开发问题
156

layui 单选框、复选框、下拉菜单不显示问题如何解决?
1. 如果是ajax嵌套了 页面, 请确保 只有最外层的页面引入了layui.css 和 layui.js ,内层页面 切记不要再次引入 2. 具体代码如下 layui.use(['form', 'upload'], function(){ var form = layui.form; form.render(); // 加入这一句});...
2024-11-09 前端开发问题
313

layui要如何改变时间日历布局大小?
问题描述 我想改变layui时间日历布局大小,这个要怎么操作呢? 解决办法 可以用css样式对时间日历进行重新布局,具体代码如下: !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...
2024-10-24 前端开发问题
271

JavaScript小数运算出现多位的解决办法
在开发JS过程中,会经常遇到两个小数相运算的情况,但是运算结果却与预期不同,调试一下发现计算结果竟然有那么长一串尾巴。如下图所示: 产生原因: JavaScript对小数运算会先转成二进制,运算完毕再转回十进制,过程中会有丢失,不过不是所有的小数间运算会...
2024-10-18 前端开发问题
301