Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jump to CSS selector in a css file from the HTML file in Vim using a single keystroke

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

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.

like image 992
Gattoo Avatar asked Oct 11 '12 06:10

Gattoo


People also ask

Is vim good for HTML and CSS?

In fact, it can make writing HTML and CSS a much more enjoyable experience. The VIM is free and open source, and you should be familiar with VIM plugins. To follow this tutorial, I will be using vim-plug as my plugin manager of choice, just as I do in my personal work.

How do I search for a file in CSS?

This navigation feature allows you to find all HTML and other markup tags that are matched by a specific CSS selector. To invoke this feature, place the caret at a CSS selector and press Alt+` or choose ReSharper | Navigate | Navigate To in the main menu, then choose Matched tags.

Where is CSS file in inspect element?

How can find the css file from inspector ? right click, choose inspect element and will open the styles tab on your right and u can see the classes that holds the css and as well on right top will show in which file name is that class.


1 Answers

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;
    }
    

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 ;-).

edit

A few additional pointers:

  • :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
like image 196
romainl Avatar answered Sep 17 '22 23:09

romainl