6

注意：VIMでHTMLを編集するときにこのリンクをCSS定義にジャンプしましたが、役に立ちませんでした。

私はCSS定義にジャンプするか、それに関してはhtmlファイルからjavascript関数にジャンプすることを探しています。定義が存在するファイルだけでなく、単語の下にあるキーコンボを押して、その定義にジャンプしたいと思います。

現在、開いているバッファ内の単語を検索してから、必要なバッファ内のすべての検索結果にアクセスする必要があります。非常に時間がかかります。

この非常に定期的な要件について私を助けてください。

4

2 に答える 2

8

この迅速で汚い関数は、*。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;
}

fooの任意の値またはbar属性値にカーソルを合わせtest.htmlて押す<F9>と、適切なファイルの適切な定義にジャンプします。この関数は、ターゲットファイルを分割して開く、リンクされたスタイルシートのみを検索する、またはZyXによって完全に嘲笑されて破壊されるように変更できます;-)。

編集

いくつかの追加のポインタ：

  • :help iskeywordこの関数がダッシュ結合された名前で機能するため
  • :help expand()
  • :help searchpos()と:help search()引数の意味について
  • :help starstar**ワイルドカードを使用する場合
于 2012-10-11T08:23:59.080 に答える
8

これは別の答えに値すると思ったので、そこに。

ctagsJavaScriptの場合と同じように、CSSサポートをに追加し、それを使用して定義にジャンプできます。~/.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/

完了すると、クラスはCSSファイルに正しくインデックスを付け、正しいCSSファイルの正しいCSS定義にジャンプ:!ctags -R .できるようになります。:tag .myClass

ただし、1つの問題があります。idsタグに含まれるクラスは、機能しますが、機能し.ませ#ん。最も簡単な解決策は、「タグ全体の検索」の代わりに「正規表現検索」を使用することです。:tag myClass:tag .myClass:tag /myClass

これらの2つのマッピングは問題なく機能しています（しばらくの間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>
于 2012-10-16T22:09:14.740 に答える