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 bo 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.
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 bo 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.
Share Improve this question edited May 23, 2017 at 10:28 CommunityBot 11 silver badge asked Oct 11, 2012 at 6:05 GattooGattoo 3,0797 gold badges27 silver badges21 bronze badges 2- I've never used it, but there exists a patch to ctags that implements css support. With this you could generate a TAGS file and use that to jump to the definition. – Randy Morris Commented Oct 11, 2012 at 10:44
- how about the neovim' version solutions? – Steve YN Commented Mar 30, 2022 at 12:35
2 Answers
Reset to default 8This 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 pletely ridiculed and destroyed by ZyX ;-).
edit
A few additional pointers:
:help iskeywordfor this function to work with dash-joined names:help expand():help searchpos()and:help search()for the meanings of the arguments:help starstarfor the use of the**wildcard
I thought this deserved to be a separate answer so, there.
You can add CSS support to ctags and use it to jump to definition the same way you would do for JavaScript. It's as simple as adding the following lines to the ~/.ctags file:
--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/
Once you are done, the clasic :!ctags -R . will correctly index your CSS files and you'll be able to do :tag .myClass to jump to the correct CSS definition in the correct CSS file.
There's one catch, though. The classes an ids tags will include their . or # so :tag myClass won't work while :tag .myClass will. The simplest solution is to use "regexp search" instead of "whole tag search": :tag /myClass.
These two mappings have worked flawlessly (for JS for a while and for CSS since a few days) :
" 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>