Vim下的Web开发之html,CSS,javascript插件

Vim下的Web开发之html,CSS,javascript插件
 

HTML

下载HTML.zip

解压HTML.zip，然后将里面的所有文件copy到C:Program FilesVimvimfiles目录下
首先，你应该把“ filetype plugin on ”写入你的vimrc。
重启vim。
新建一个test.html文件。用gvim打开按 ";html"看看会有什么结果！注意";html"是英文的分号(；)

 

css

似乎很久没有关注 Vim 的动向了，在 Vim 脚本列表中找到个非常好的 CSS 颜色显示插件。

这个插件可以很直观的显示 CSS 文件中定义的颜色，如下图所示。这样我们就不用一边用 Vim 写 CSS ，一边查那该死的色表了。

http://files.gracecode.com/2009_11_05/327435209e1d.jpg

安装这个插件非常简单(继续戳这里下载)，只要将这个文件拷贝到

$VIMRUNTIME/after/syntax/

目录下就可以了（没有的话新建一个）。这样说可能不怎么直观，那么 Windows 用户拷贝到

C:Program FilesVimvimfilesaftersyntax

这个目录下（如果你是默认安装 Vim 的话）；而 *ix 系统用户则拷贝到

$HOME/.vim/after/syntax/

这里目录下就可以了。

而代码提示插件用的是AutoComplPop，还在使用DW或者aptana等一些工具的朋友们肯定对代码弹出提示情有独钟，这款插件的功能可以说是有 过之而无不及啊，当然如果你不喜欢这种自动的代码提示的话可以不用装。需要的朋友还是戳这里下载。

Javascript

转载：http://panweizeng.com/archives/359

如果你喜欢vim，平时也写写javascript，那么这篇文章就是为你而写的：）如果你喜欢javascript，但是还没有找到合适的编辑器，那么请give vim a try。

以下假定你对vim已经有所了解，另外所有插件在gnome-terminal中都测试过，在其他终端中应该不会有太大问题。

    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

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

      字典补全－javascript.dict

      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

      截屏（点击可查看大图）

      YUI自动补全

      待续…

    3. 运行代码片段－spidermonkey

      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，这样会插入执行结果到当前文件。
      截屏（点击可查看大图）

      语法检查和快速调试－javascriptlint

      http://www.javascriptlint.com/
      这个工具的代码基于Douglas Crockford’s的jslint，在代码检查方面很强大，可以说非常苛刻。如果从头开始写代码，建议经常用它来检查代码，能明显提高代码的质量。下载时不要从代码库check out最新版本，而是下载稳定的0.3.0版本。
      cd jsl-0.3.0/src/ #这里的jsl-0.3.0是解压缩目录 make -f Makefile.ref all
      cdLinuxAllDBG.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等。
      截屏（点击可查看大图）

      其他常用插件

    4. 虽然我不怎么用，但是可能对你有一些帮助
      winmanager 类似资源管理器，如果从editplus或者其他图形编辑器转过来的朋友，这个可能很有用。
      截屏（点击可查看大图）

    5. minibufexplorer 类似标签页，管理当前打开的文件
      Tlist可以显示代码结构
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/china1/p/3520946.html