更好的用vim浏览Javascript代码

标签: 前端 | 发表时间:2011-05-08 07:36 | 作者:kejun cRabdanceR
出处:http://hikejun.com/blog

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。

相关 [vim javascript 代码] 推荐:

更好的用vim浏览Javascript代码

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

vim代码补全终极配置

- baocheng - 博客园-首页原创精华区
下面的效果如如果没有特殊说明,均是不需要按代码提示的快捷键(例如ctrl+p等)的,看看效果,是不是很想visual assist. 1.1  结构struct和枚举enum代码提示:. 1.2  用户定义函数代码提示. 1.3  用户定义变量代码提示. 1.4  c++ class method代码提示:.

两行 JavaScript 代码

- MessyCS - Dreamer's Blog
最近看到了两行 JavaScript 代码,很受启发. 在 JavaScript 中,我们可以获取HTML元素的属性值,例如 element.id. 但是,因为 for 和 class 是 JavaScript 中的关键字,所以在 JavaScript 中这两个属性名称分别用 htmlFor 和 className 代替,于是在封装的时候需要先对这两个属性进行特殊判断.

Vim下的代码自动补全和代码跳转阅读

- Frankenstein - IT技术博客大学习
    Linux之所以今天仍然只被少数人使用,不能像windows一样进入寻常百姓家,其配置之难之烦,还是很让人不爽. 号称Linux编辑器哼哈二将之一的Vim也是难逃此列. 虽然很多高手用的得心应手,但是作为初学者往往不知道如何下手.     我希望把同为初学者的我的配置经历,以尽量简洁的语言叙述,试图使这个过程看上去不再那么恐怖.

gocode——VIM 和 Emacs 的 golang 代码自动补全

- XiaoHui - Some reminiscences, some memories
虽然 golang 自身提供了 VIM 的语法高亮之类的脚本,但 autocompletion 并没有官方解决方案. 无意之中发现 gocode 这个支持 VIM 和 Emacs 的 autocompletion daemon. 这里有个Flash 动画演示,展示了 gocode 的强大. 我得说,用过之后,感觉速度确实够快.

给vim添加自动代码长度检测逻辑

- Hitsmaxft - WindStorm
每一种编程语言都有自己的代码规范,这里面少不了的就有代码长度. 比如一般c或者python就是80,而java就是100. 很多朋友都喜欢在vim下写代码,也就习惯了设置不同长度的wrap来处理这个问题. 这里介绍两个另类但是也很常用的方法. 一种是在vim里面自动在80/100的地方画一条红色竖线,提醒你,一旦你越线,就超过代码长度了.

一段Javascript的代码

- Deland - 酷壳 - CoolShell.cn
我们先看一段Javascript的代码,如下所示:(你能看出来这是干什么的. 这段代码来自BlackHat DC 2011((黑帽安全大会,全世界最大两个黑客大会之一,另一个是Defcon)中的一个叫Ryan Barnett黑客做的XSS Street-Fight. 的演讲(XSS是Web上比较经典的跨站式攻击,操作起来也有些复杂),一共69页,基本上都是一些比较枯燥的Javascript,不过这段代码挺有意思的,如果上面这段代码换个样子:.

JavaScript代码复用模式

- - SegmentFault 最新的文章
代码复用,顾名思义就是对曾经编写过的代码的一部分甚至全部重新加以利用,从而构建新的程序. 在谈及代码复用的时候,我们首先可以想到的是 继承性. 优先使用对象组合,而不是类继承. 在js中,由于没有类的概念,因此实例的概念也就没多大意义,js中的对象是简单的键-值对,可以动态的创建和修改它们. 但在 js中,我们可以使用构造函数和 new操作符来实例化一个对象,这与其他使用类的编程语言在语法上有其相似之处.

使用 JSLint 保证 JavaScript 代码质量

- zhibin - IBM developerWorks 中国 : Web development : Articles,Tutorials
随着富 Web 前端应用的出现,开发人员不得不重新审视并重视 JavaScript 语言的能力和使用,抛弃过去那种只靠“复制 / 粘贴”常用脚本完成简单前端任务的模式. JavaScript 语言本身是一种弱类型脚本语言,具有相对于 C++ 或 Java 语言更为松散的限制,一切以函数为中心的函数式编程思想也为开发人员提供了更加灵活的语法实现.

也谈JavaScript代码性能优化

- 可乐加糖 - Fdream's Blog
差不多两年前写了个选择器whiz,除在DOM查找方面做了许多优化工作之外,还在代码优化上做了很多工作,一直没有分享. 抽空总结一下,基本上在jQuery、Mootools和YUI的源码里面都可以看到这些写法. 有些是已经在网上分享很多遍了,众所周知的,也有一些可能写了多年的JavaScript的开发人员也不一定想得到的.