专注于前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

插件

  • 在VIM里 调用多种浏览器 预览html php 等文件

    / 分类: 工具,实践 / 25 Comments

    最近这段时间睡眠严重不足，脑袋发晕的时候就要放送下，so改善vim。产生个想法：把自己喜欢的editplus的功能都搞到vim上面来。这个就是其中之一：在浏览器中预览当前文件。有时间的话，可能要写点从editplus转型到VIM的东西。

    优点1：
    囊括了主要的浏览器：chrome、firefox、oprea、ie、ietester（随自己喜欢可以增加更多，比如safari），浏览器的简称：cr、ff、op、ie、ie6、ie7、ie8、ie9、iea，简称、路径以键值对方式都保存到browsers中。
    上面的简称大部分人应该都明白了，ie就是系统默认的ie，最后一个iea是在ietester中使用所有版本的ie同时预览（IE5.5-IE9）。

    IETester 的Arguments可以见 : http://www.my-debugbar.com/wiki/IETester/CommandLineArguments

    优点2：
    本地文件自动以file://开头或http://开头的两种方式预览。如果文件在htdocs就用http方式打开，否则用file方式。
    file://开头的地址预览html一般没问题，但是预览php或aspx等就显得苍白无力了。这里可以设置一个htdocs/wwwroot的文件夹地址，然后预览的时候匹配文件是否在这个文件夹内(支持子目录)，如果在就用http://方式打开，否则就用file://方式。

    无论前端开发者或者程序员都及其适合。自夸完毕，下面说下使用：
    在_vimrc中加入下面的代码，然后按F4+cr - 在chrome预览，F4+ff  - 在firefox下预览……。方式就是F4+浏览器简称（应该比用F4+1234的数字形式便于记忆）。当然，这个完全可以自己diy的。

    下面fuc里面的浏览器地址需要自己修改，我的文件夹目录和你的可能是有不同的。还有htdocs文件夹、本地的预览的端口号，我使用的是8090.

    1. " 在浏览器预览 for win32
    2. function! ViewInBrowser(name)
    3.     let file = expand("%:p")
    4.     exec ":update " . file
    5.     let l:browsers = {
    6.         \"cr":"D:/WebDevelopment/Browser/Chrome/Chrome.exe",
    7.         \"ff":"D:/WebDevelopment/Browser/Firefox/Firefox.exe",
    8.         \"op":"D:/WebDevelopment/Browser/Opera/opera.exe",
    9.         \"ie":"C:/progra~1/intern~1/iexplore.exe",
    10.         \"ie6":"D:/WebDevelopment/Browser/IETester/IETester.exe -ie6",
    11.         \"ie7":"D:/WebDevelopment/Browser/IETester/IETester.exe -ie7",
    12.         \"ie8":"D:/WebDevelopment/Browser/IETester/IETester.exe -ie8",
    13.         \"ie9":"D:/WebDevelopment/Browser/IETester/IETester.exe -ie9",
    14.         \"iea":"D:/WebDevelopment/Browser/IETester/IETester.exe -all"
    15.     \}
    16.     let htdocs='E:\\apmxe\\htdocs\\'
    17.     let strpos = stridx(file, substitute(htdocs, '\\\\', '\', "g"))
    18.     if strpos == -1
    19.        exec ":silent !start ". l:browsers[a:name] ." file://" . file
    20.     else
    21.         let file=substitute(file, htdocs, "http://127.0.0.1:8090/", "g")
    22.         let file=substitute(file, '\\', '/', "g")
    23.         exec ":silent !start ". l:browsers[a:name] file
    24.     endif
    25. endfunction
    26. nmap <f4>cr :call ViewInBrowser("cr")<cr>
    27. nmap <f4>ff :call ViewInBrowser("ff")<cr>
    28. nmap <f4>op :call ViewInBrowser("op")<cr>
    29. nmap <f4>ie :call ViewInBrowser("ie")<cr>
    30. nmap <f4>ie6 :call ViewInBrowser("ie6")<cr>

    另外有同学想要linux下面的例子, 我没有环境, Mac下面这样是OK的,可以参考:

    1. " 在浏览器预览 for Mac
    2. function! ViewInBrowser(name)
    3.     let file = expand("%:p")
    4.     let l:browsers = {
    5.         \"cr":"open -a \"Google Chrome\"",
    6.         \"ff":"open -a Firefox",
    7.     \}
    8.     let htdocs='/Users/leon1/'
    9.     let strpos = stridx(file, substitute(htdocs, '\\\\', '\', "g"))
    10.     let file = '"'. file . '"'
    11.     exec ":update " .file
    12.     "echo file .' ## '. htdocs
    13.     if strpos == -1
    14.         exec ":silent ! ". l:browsers[a:name] ." file://". file
    15.     else
    16.         let file=substitute(file, htdocs, "http://127.0.0.1:8090/", "g")
    17.         let file=substitute(file, '\\', '/', "g")
    18.         exec ":silent ! ". l:browsers[a:name] file
    19.     endif
    20. endfunction
    21. nmap <Leader>cr :call ViewInBrowser("cr")<cr>
    22. nmap <Leader>ff :call ViewInBrowser("ff")<cr>
  1. 1
  2. 2