最近一个需求,需要用浏览器读取图片在前端缩略显示并且根据文件信息排序。

JSer们,不管是前后端,文件头的dependency部分堆积了一群犬牙交错的require语句的时候,内心有没有过一个冲动把它们全都捋一遍全对齐了!各种foramtter给平日的眼净心静贡献了不少力量,不过我印象中ST,VIM,Webstorm好像都没有这么个插件,干脆自己写一个吧。

  • VIM

~/.ctags里加上这几行定义下scss文件的规则:

--langdef=scss
--langmap=scss:.scss
--regex-scss=/^[ \t]*([^\t {}][^{}]{1,100})(\t| )*\{/| \1/d,definition/
--regex-scss=/^[@]mixin ([^ ()]+).*/\1/m,mixin/
--regex-scss=/^[@]function ([^ ()]+).*/\1/f,function/}
--regex-scss=/^\$([A-Za-z0-9._-]+)\s?:.*/\1/v,variable/}

~/.vimrc里加上这几行(前提是VIM有安装Tagbar插件哦)

let g:tagbar_type_scss = {
  \ 'ctagsbin'     : 'ctags',
  \ 'ctagstype'     : 'scss',
  \ 'kinds'     : [
      \ 'd:definition',
      \ 'f:functions',
      \ 'm:mixins',
      \ 'v:variables',
  \ ],
\ }

写正则真是越来越好玩了。

VIM的插件Tagbar可以在侧边栏显示当前代码结构,不过Tagbar使用的ctags不支持coffeescript。

不过我们可以使用ruby版本的CoffeeTags生成tags。

首先:

$ [sudo] gem install CoffeeTags

然后只要在~/.vimrc里加上下面几行配置。(参考CoffeeTags项目自带的vim插件)

if executable('coffeetags')
  let g:tagbar_type_coffee = {
    \ 'ctagsbin' : 'coffeetags',
    \ 'ctagsargs' : '',
    \ 'kinds' : [
      \ 'c:classes',
      \ 'm:methods',
      \ 'a:attributes',
      \ 'f:functions',
      \ 'v:variables',
      \ 'p:prototypes',
      \ 'o:object',
      \ 'b:blocks'
    \ ],
    \ 'sro' : ".",
    \ 'kind2scope' : {
      \ 'f' : 'function',
      \ 'o' : 'object',
    \ }
  \ }
endif

就可以浏览清晰的coffee结构啦。