利用正規表示法為CSS跟SCSS建立tags -- Vim, Ctags and Taglist, Tagbar

    看這篇文章前我假設你應該會用Vim和安裝完Ctags和Taslist。

1. 環境
  •  OS: Ubuntu 13.04 x64
  •  Vim 7.3
  •  Exuberant Ctags 5.9 svn20110310

2. 為Ctags加入新語言parser

    Ctags為新的語言加上parser有兩種方法:

  • C code的parser,速度會比較快但是跨平台後就重新build Ctags一次。
  • 利用Ctags提供的regex來完成parser

    所以如果Ctags沒有內建新語言的parser的話,我個人是偏好使用regex來對新的
語言做parse,這樣比較容易在不同的平台上使用。

3. Example

   以下我用css跟scss來做範例:

# 編輯 $HOME/.ctags
--langdef=css
--langmap=css:.css.scss
--regex-css=/^\.([_a-zA-Z0-9]+:?[_a-zA-Z0-9]+)?/\1/c/
--regex-css=/^([A-Za-z0-9_]+[\t\r\n\v\f]?([>:]?[\t\r\n\v\f]?[A-Za-z0-9_]+)?(:{2}[\t\r\n\v\f]?([-][A-Za-z0-9_]+)*)?(\(\[[A-Za-z0-9_]+\]\))?)/\1/s/
--regex-css=/^#(-?[A-Za-z0-9_]+:?[_a-zA-Z0-9]+)?/\1/i/
--css-kinds=+cis

# 編輯 taglist.vim 加入以下的code
" css
let s:tlist_def_css_settings = 'css;c:class;i:id;s:selector'

" scss  
let s:tlist_def_scss_settings = 'css;c:class;i:id;s:selector'

P.S. 我這邊的正規表示法可能沒辦法抓到全部class, idselector所以還是建議要用的人自己寫出自己要的正規表示法,也希望你可以跟我分享你的正規表示法。

    我測試的pattern在githib上(連結如下),如果你有想要parse的pattern,歡迎讓我知道我有空就會把他加上去,還有更新正規表示法的部份,謝謝。
https://github.com/CarterTsai/ctagsTest/blob/master/test.css

4. 結果




















P.S.  如果你要讓Tagbar也支援CSS的話就加入以下的code到vimrc底下就可以了。

let g:tagbar_type_css = {
\ 'ctagstype' : 'Css',
    \ 'kinds'     : [
        \ 'c:classes',
        \ 's:selectors',
        \ 'i:identities'
    \ ]
\ }

張貼留言

這個網誌中的熱門文章

Unions 在C語言的簡單介紹

解釋scope.$apply用來做什麼? -- AngularJS

JavaScript的Timer用法