增强vim的js语法高亮和代码阅读能力

Posted by c4pr1c3 on December 1, 2010

vim默认是可以支持javascript源代码的语法高亮,vim的Taglist插件也可以对javascript代码进行关键信息提取,但实际用于开发时总觉得不够给力。具体表现在哪些方面呢?

  1. vim无法对OOP风格的函数定义进行语法高亮
  2. vim默认不识别.jsm为Javascript
  3. Taglist无法识别诸如:var foo = function bar() {} 这种形式的函数名提取
  4. ctags对javascript代码的自动补全索引生成算法不够智能,导致vim中使用代码补全功能时会面对大量“噪音”提示

目前,对于问题1、2和3,我已经找到了解决方法,问题4先凑合着用吧,好在我现在做的这个Firefox扩展的js代码量不是很大,多些“噪音”提示也不是什么大事。

1. vim语法高亮的更好支持

安装这个vim插件:JavaScript syntax : Better JavaScrirpt syntax support

2. 让vim将.jsm文件识别为javascript源代码文件

编辑~/.vimrc,增加以下代码:

"set new file extension jsm as javascript file.
au BufNewFile,BufRead *.jsm set filetype=javascript

3. 增强Taglist的Javascript语法识别能力

编辑~/.ctags,加入以下代码:
--langdef=Javascript
--langmap=Javascript:.js.jsm
--regex-JavaScript=/(^|^[^\/*]+[[:blank:]])([A-Za-z0-9._$]+)[[:blank:]]*[:=][[:blank:]]*new[[:blank:]]+Object\(/\2/o,object/
--regex-JavaScript=/(^|^[^\/*]+[[:blank:]])([A-Za-z0-9._$]+)[[:blank:]]*[:=][[:blank:]]*\{/\2/o,object/
--regex-JavaScript=/(^|^[^\/*]+[[:blank:]])(^[^\?][[:blank:]]*)([A-Za-z0-9_]+)[[:blank:]]*[:][[:blank:]]*[A-Za-z0-9._$'"()]+/\3/m,member/
--regex-JavaScript=/(^|^[^\/*]+[[:blank:]])([A-Za-z0-9._$]+)[[:blank:]]*[:=][[:blank:]]*new[[:blank:]]+Array\(/\2/a,array/
--regex-JavaScript=/(^|^[^\/*]+[[:blank:]])([A-Za-z0-9._$]+)[[:blank:]]*[:=][[:blank:]]*\[/\2/a,array/
--regex-JavaScript=/(^|^[^\/*]+[[:blank:]])([^! ]+[^= ]+)[[:blank:]]*=[[:blank:]]*[^""]'[^'']*/\2/s,string/
--regex-JavaScript=/(^|^[^\/*]+[[:blank:]])([A-Za-z0-9._$()]+)[[:blank:]]*[:=][[:blank:]]*function[[:blank:]]*\(/\2/f,function/
--regex-JavaScript=/(^|^[^\/*]+[[:blank:]])function[[:blank:]]+([A-Za-z0-9._$]+)[[:blank:]]*([^)])/\2/f,function/

如果上面的正则表达式你在使用中发现有bug,可以自己修改。我也是在Google搜索结果的基础上,反复试验了一段时间之后,目前自己使用比较稳定的版本(我主要是用来做Firefox扩展开发用,所以测试用例数量有限)。

下一步将让vim的Taglist插件支持高亮显示Javascript源代码中的

  • 字符串
  • 数组
  • 对象
  • 函数
  • 对象成员

编辑~/.vimrc,增加以下代码:

let g:tlist_javascript_settings = 'javascript;s:string;a:array;o:object;f:function;m:member'

最后上一个效果图:

vim javascript edit improvements demo

参考资源

  1. How can I make vim’s taglist plugin show useful information for javascript?
  2. Exuberant Ctags and JavaScript
  3. Vim: restricting methods shown by omnicomplete to those present in ctags