专注于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. Vim配置 | 核桃薄壳

    [...]http://www.fantxi.com/blog/archives/vim-view-in-browser-func/[...]

  2. Wim Wim

    请教下博主,如果是linux下,需要怎么修改阁下的脚本?

    1. kairyou kairyou

      你好, 我没有Linux的环境, search了下: 比如调用chrome, 可以直接:google-chrome {file-path} (那么脚本修改"cr"的值为"google-chrome"就OK了).
      主要就是htdocs/strpos/file这几个变量以及字符串的替换, 你可以通过 echo file/htdocs 这些变量来debug.

      1. Wim Wim

        嗯,谢谢博主的解答。但还有一事不明:“ let htdocs='E:\\apmxe\\htdocs\\' “这行脚本是windows下的路径,我需要改成linux下的路径,我实验过”\\“好像不行,不知道这个路径如何写?比如我linux下的路径是”~/SourceCode/htdocs/“,谢谢博主!

        1. kairyou kairyou

          Linux用绝对路径就OK了(pwd), \\是照顾windows的写法

          1. Wim Wim

            博主,我又来了,实在惭愧,一直没搞定在linux下的浏览器预览,因为file:///和http://的识别搞不定。求分享一篇linux下vim调用浏览器的博文,博主好人哪!

          2. kairyou kairyou

            Hi, file:///和http://的识别是靠路径来识别的, 在htdocs目录外的都是用file://, 我没linux桌面, Mac下面的例子我写在文章的最下面了.

          3. Wim Wim

            博主真心好人!不过我用博主新提供的脚本,在mac下测试有问题哦!在按下快捷键后,编辑器会变空白,没有打开浏览器,也没有任何反应,博主有遇到过吗?

  3. kairyou kairyou

    @Wim 你用的Macvim吗?我这里正常的, 你在脚本里面用echo打印信息debug下吧.另外可以命令行执行open -a "Google Chrome"看是否可以启动chrome, 并且":silent ! xxx"的命令可以在vim的命令行执行的.

    1. Wim Wim

      ":silent ! xxx"可以直接启动浏览器的,在vim用快捷键的时候会报错,如下:

      error detected while processing function viewInBrowser:
      E722 :Missing comma in Dictionary:
      E15: Invalid expression:
      E121: undefined variable:
      E15: iNVALID EXPRESSION

      1. kairyou kairyou

        估计之前粘贴到文章的代码没转义, 你从新粘贴试试吧. 这错误应该是语法有问题导致的, 如果那还不行, 就一行一行debug吧..

    2. Wim Wim

      总算完全搞定了!谢谢博主!调试配置文件的时候字符有问题,调整好字符格式就好了!另外linux直接给绝对路径就可以使用了,和Mac的脚本一样,我测试已经通过了!

  4. 十年灯 十年灯

    感谢作者,我在win32下用上了.基本功能没问题,但有下面的问题解决无门:

    1,中文目录会变成乱码传给浏览器从而找不到路径

    2,目录名有空格,就会变成前后两截,两个路径传给浏览器,结果一个都找不到

    VIM今天才开始用,很无奈啊

    1. kairyou kairyou

      空格的问题let file = '"'. file . '"'应该就能解决(参照Mac版里面的配置); 文件名乱码不知道设置termencoding是否可以, 你可以试试看.

    2. 张震 张震

      gvim是在编辑模式下输入:f4 +cr就可以调用谷歌浏览器吗?

      1. kairyou kairyou

        要看nmap绑定了什么快捷键,比如: `<Leader>cr`, 就是顺序按\cr, 如果你是windows系统, 要改 `l:browsers`里面的浏览器路径.

添加新评论 »