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

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

最近这段时间睡眠严重不足,脑袋发晕的时候就要放送下,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.

" 在浏览器预览 for win32
function! ViewInBrowser(name)
    let file = expand("%:p")
    exec ":update " . file
    let l:browsers = {
        \"cr":"D:/WebDevelopment/Browser/Chrome/Chrome.exe",
        \"ff":"D:/WebDevelopment/Browser/Firefox/Firefox.exe",
        \"op":"D:/WebDevelopment/Browser/Opera/opera.exe",
        \"ie":"C:/progra~1/intern~1/iexplore.exe",
        \"ie6":"D:/WebDevelopment/Browser/IETester/IETester.exe -ie6",
        \"ie7":"D:/WebDevelopment/Browser/IETester/IETester.exe -ie7",
        \"ie8":"D:/WebDevelopment/Browser/IETester/IETester.exe -ie8",
        \"ie9":"D:/WebDevelopment/Browser/IETester/IETester.exe -ie9",
        \"iea":"D:/WebDevelopment/Browser/IETester/IETester.exe -all"
    \}
    let htdocs='E:\\apmxe\\htdocs\\'
    let strpos = stridx(file, substitute(htdocs, '\\\\', '\', "g"))
    if strpos == -1
       exec ":silent !start ". l:browsers[a:name] ." file://" . file
    else
        let file=substitute(file, htdocs, "http://127.0.0.1:8090/", "g")
        let file=substitute(file, '\\', '/', "g")
        exec ":silent !start ". l:browsers[a:name] file
    endif
endfunction
nmap <f4>cr :call ViewInBrowser("cr")<cr>
nmap <f4>ff :call ViewInBrowser("ff")<cr>
nmap <f4>op :call ViewInBrowser("op")<cr>
nmap <f4>ie :call ViewInBrowser("ie")<cr>
nmap <f4>ie6 :call ViewInBrowser("ie6")<cr>

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

" 在浏览器预览 for Mac
function! ViewInBrowser(name)
    let file = expand("%:p")
    let l:browsers = {
        \"cr":"open -a \"Google Chrome\"",
        \"ff":"open -a Firefox",
    \}
    let htdocs='/Users/leon1/'
    let strpos = stridx(file, substitute(htdocs, '\\\\', '\', "g"))
    let file = '"'. file . '"'
    exec ":update " .file
    "echo file .' ## '. htdocs
    if strpos == -1
        exec ":silent ! ". l:browsers[a:name] ." file://". file
    else
        let file=substitute(file, htdocs, "http://127.0.0.1:8090/", "g")
        let file=substitute(file, '\\', '/', "g")
        exec ":silent ! ". l:browsers[a:name] file
    endif
endfunction
nmap <Leader>cr :call ViewInBrowser("cr")<cr>
nmap <Leader>ff :call ViewInBrowser("ff")<cr>

/ 分类: 工具,实践 / TrackBackhttps://xhl.me/archives/vim-view-in-browser-func/trackback标签: vim, 浏览器, works, 插件

已有 25 条评论 »

  1. CNA Training CNA Training

    Nice site, nice and easy on the eyes and great content too.

  2. bq69 bq69

    不错。但我按你的方法做了,预览不了,不知道哪错了。郁闷。。。

  3. kairyou kairyou

    我觉得可能是你htdocs文件夹目录没写对。你可以试试非htdocs目录的htm文件。

  4. 强哥仔 强哥仔

    我的也不行,上面的代码有没有写调用的

    1. Gracelin Gracelin

      Great thinking! That really berkas the mold!

  5. kairyou kairyou

    我这里没问题啊。map绑定的代码我刚加上了。还有可以调试下:
    把 if strpos == -1 到 endif 的代码注释掉,然后在func里面加上
    echo file 调试下,还有browsers里面浏览器路径必须要指定正确。

  6. macy s coupons macy s coupons

    谢谢站长这样一个有意义的博客文章。给我留下了深刻的印象与你的看法 ?VIM? ??????? ??html php ??? - ??web????.

  7. 豪情 豪情

    非常感谢帮忙解决问题。

    1. kairyou kairyou

      @豪情
      谢谢你的反馈:)

添加新评论 »