使用vim来编写javascript代码

  1. 语法高亮-javascript.vim
    http://www.vim.org/scripts/script.php?script_id=1491
    该插件安装在~/.vim/syntax/目录下。下载后需要修改一个地方,一般javascript编程,折叠层数不需要太深,我自己设置为1,即:
    setlocal foldlevel=1。
    需要在.vimrc中加入
    1. " 打开javascript折叠
    2. let b:javascript_fold=1
    3. " 打开javascript对dom、html和css的支持
    4. let javascript_enable_domhtmlcss=1

    截屏(点击可查看大图)
    语法高亮

  2. 变量标记和检查-mark.vim
  3. http://www.vim.org/scripts/script.php?script_id=1238
    该插件安装到~/.vim/plugin/目录。在对变量进行检查和跟踪的时候会很有用,同时还可以防止变量名拼写错误。打开/关闭变量标记的默认快捷键是"m。也可以使用v选中一段进行标记。
    截屏(点击可查看大图)
    变量标记和检查

  4. 字典补全-javascript.dict
  5. http://lazy-people.org/browser/project/dotfiles/users/dann/.vim/dict/javascript.dict?rev=122
    该字典可以放在任意目录,我一般放在~/.vim/dict/目录中。使用字典补全需要在插入模式下,快捷键是Ctrl+X,然后Ctrl+K。有些javascript内置函数名超长,经常记不住,这时候字典就比较有用。字典其实就是一个普通文件,里面是关键词的列表,一行一个,所以你也可以加入一些你在项目中经常使用的函数。
    另外需要在.vimrc中加入

    1. "设置字典 ~/.vim/dict/javascript.dict是字典文件的路径
    2. autocmd FileType javascript set dictionary=~/.vim/dict/javascript.dict

    截屏(点击可查看大图)
    字典补全

  6. YUI自动补全
  7. 待续…

  8. 运行代码片段-spidermonkey
  9. http://www.mozilla.org/js/spidermonkey/
    有时想测试一个小东西,没有必要写一个html然后到浏览器去运行,spidermonkey能帮你忙,而且spidermonkey还能作一些很 geek的事情。ubuntu系统安装很简单,sudo apt-get install spidermonkey-bin,其他系统请参考网站的文档。安装完毕后,输入js,则会进入一个js shell,和python类似。输入help()回车,会看到一个简单的帮助。
    在vim编写javascript代码后,输入!js %即可执行当前文件的代码。也可以选中一段代码然后执行:’<,'>!js,这样会插入执行结果到当前文件。
    截屏(点击可查看大图)
    spidermonkey

  10. 语法检查和快速调试-javascriptlint
  11. http://www.javascriptlint.com/
    这个工具的代码基于Douglas Crockford’sjslint,在代码检查方面很强大,可以说非常苛刻。如果从头开始写代码,建议经常用它来检查代码,能明显提高代码的质量。下载时不要从代码库check out最新版本,而是下载稳定的0.3.0版本。
    $ cd jsl-0.3.0/src/ #这里的jsl-0.3.0是解压缩目录
    $ make -f Makefile.ref all
    $ cd Linux_All_DBG.OBJ/
    $ cp jsl jscpucfg /home/xp/bin/js/ #/home/xp/bin/js/要拷贝到的目录,可以任意位置
    $ cd /home/xp/bin/js/
    $ jsl -help:conf > jsl.conf #生成默认配置文件
    另外需要在.vimrc中加入

    1. "设置javascriptlint
    2. autocmd FileType javascript set makeprg=/home/xp/bin/js/jsl" -nologo" -nofilelisting" -nosummary" -nocontext" -conf" '/home/xp/bin/js/jsl.conf'" -process" %
    3. autocmd FileType javascript set errorformat=%f(%l):" %m
    4. autocmd FileType javascript inoremap <silent> <F9> <C-O>:make<CR>
    5. autocmd FileType javascript map <silent> <F9> :make<CR>

    使用时使用:make命令即可,或者使用F9快捷键。还需要理解的是quickfix,输入命令help quickfix看以下文档,主要涉及的命令有:cw :cn :cp等。
    截屏(点击可查看大图)
    javascriptlint

  12. 其他常用插件
    虽然我不怎么用,但是可能对你有一些帮助
    winmanager 类似资源管理器,如果从editplus或者其他图形编辑器转过来的朋友,这个可能很有用。
    截屏(点击可查看大图)
    winmanager
    minibufexplorer 类似标签页,管理当前打开的文件
    Tlist可以显示代码结构


posted @ 2009-05-14 20:24  麦飞  阅读(3680)  评论(0编辑  收藏  举报