IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

更好的用vim浏览Javascript代码

Kejun's Blog 2011-05-17 09:08:49 累计浏览 4,326 次
本机暂存

vim默认没有一般IDE的outline视图,浏览长篇Javascript源文件很麻烦,taglist插件正是弥补这点不足。它可以将所有方法和变量分级罗列出来,一目了然。taglist是依赖强大的ctags实现的。ctags支持41种编程语言,其中包括Javascript,但对Javascript支持较随意。

ctags + taglist的安装过程:
1. 下载exuberant ctags
2. 安装exuberant ctags:
> ./configure
> make
> sudo make install
3. 安装taglist
4. 让taglist针对javascript显示更多信息。新建$HOME/.ctags文件,添加:
感谢@KDepp补充: windows用户要注意,放在$HOME/ctags.cnf中。

--regex-JavaScript=/([A-Za-z0-9._$]+)[ \t]*[:=][ \t]*new[ \t]+Object\(/\1/o,object/
--regex-JavaScript=/([A-Za-z0-9._$]+)[ \t]*[:=][ \t]*\{/\1/o,object/
--regex-JavaScript=/([A-Za-z0-9._$()]+)[ \t]*[:=][ \t]*function[ \t]*\(/\1/f,function/
--regex-JavaScript=/function[ \t]+([A-Za-z0-9._$]+)[ \t]*\([^\]\)]*\)/\1/f,function/
--regex-JavaScript=/([A-Za-z0-9._$]+)[ \t]*[:=][ \t]*new[ \t]+Array\(/\1/a,array/
--regex-JavaScript=/([A-Za-z0-9._$]+)[ \t]*[:=][ \t]*\[/\1/a,array/
--regex-JavaScript=/([^= ]+)[ \t]*=[ \t]*[^""]'[^'']*/\1/s,string/
--regex-JavaScript=/([^= ]+)[ \t]*=[ \t]*[^'']"[^""]*/\1/s,string/

5. 在.vimrc添加:

let Tlist_JS_Settings = 'javascript;s:string;a:array;o:object;f:function'
let Tlist_Ctags_Cmd = '/usr/local/bin/ctags'

6. 打开一个js,执行:Tlist。

遇到问题可参考下面链接:

http://vim-taglist.sourceforge.net/faq.html

http://easwy.com/blog/archives/exuberant-ctags-chinese-manual/

jsctags是专门针对javascript做的,目的就是提供比ctags更好的索引结果。它完全是用javascript写的,基于node.js和narcissus。现在这个项目已改名为DoctorJS

下面这两个插件都是利用DoctorJS对javascript文件做处理的:
1. Taglist-Plus
2. Tagbar。另一篇介绍Tagbar的文章:http://is.gd/tKfuTe

在编辑.html文件里的javascript,taglist找不到任何标签。只好先:set ft=php,再用Tagbar。

同分类推荐文章

  1. 科技爱好者周刊(第 401 期):如何赚到10亿美元 (2026-06-26 08:05:38)
  2. 如何做决策 - 从 Go 的一个 issue 说起 (2026-06-26 08:00:00)
  3. Seven Player:Windows上播放115网盘视频的增强工具 (2026-06-09 00:06:47)

查看更多 开发者 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,350)
  2. vim几个小技巧(批量替换,列编辑) (累计阅读 37,517)
  3. 简明Vim练级攻略 (累计阅读 22,278)
  4. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,404)
  5. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,933)
  6. Vim下的代码自动补全和代码跳转阅读 (累计阅读 15,349)
  7. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,849)
  8. 天朝第二代身份证号码的验证机制 (累计阅读 14,762)
  9. HTML 5 的data-* 自定义属性 (累计阅读 14,349)
  10. 分享一个JQUERY颜色选择插件 (累计阅读 14,223)