VsCode扩展插件LiveServer使用和代理设置

前言：

有时候，要用http来运行一个本地网页，调试ajax, restful, websocket等操作。

尽管有很多IDE如 Eclipse, VisualStudio, PhpStorm 可以实现。但这些工具好像太重型，在一台新电脑上安装也是费时。

还有 php, python, nodejs 等都有 cli、 cgi、第三方库  来启动 http 服务。但这也仅仅是开了web服务器。

使用IDE编写代码时，实现代码感应，智能插入代码块，快速查找变量，函数及文件名，对你的工作效率是非常有帮助的。（专注于 记事本，vim编程的人 则另当别论）

另外，若你需要处理几个不同编程环境的系统运维或微调微修改，不同编程语言IDE也有局限。

 

一番搜索就找到VsCode + LiveServer的组合

一、安装VisualStudioCode。
    
    https://code.visualstudio.com/
    
    （可选）安装nodejs
    
二、打开VsCode搜 LiveServer 扩展并安装

三、在VsCode里打开一个本地的web目录。（目录下有 html, js, css 等文件）

    在工程面板里，右键一个 html，在弹出菜单里，选择 “Open with Live Server” 这样VsCode就会开启LiveServer的Web功能，并以http的方式打开这个html
    
四、LiveServer扩展的设置，可以进入设置界面设置，也可以手动设置settings.json
 

{

    "liveServer.settings.host": "localhost", //域名或IP

    "liveServer.settings.port": 8820,       //端口

    "liveServer.settings.wait": 1000,       //刷新频率

    "liveServer.settings.CustomBrowser": "chrome",  //打开到目标浏览器

    "liveServer.settings.ChromeDebuggingAttachment": false, //是否开启ChromeDebug

    "liveServer.settings.proxy": {  //代理设置

        "enable": true,

        "baseUri": "/vdir",

        "proxyUri": "http://localhost:12680/other_web"

    },

}

五、LiveServer代理设置

    "enable": true,  //是否开启代码设置    
    
    //LiveServer挂载虚拟路径，默认为 /

    "baseUri": "/vdir", 

    //设置为"/vdir"后，通过“Open with Live Server”打开的工程下的任何文件，都会在url前附上 /vdir 前缀
        
    "proxyUri": //代理网址
    
    如果设置为  "http://localhost:12680/other_web/"
    
    那么，当你通过 “Open with Live Server” 打开 index.html 后， 
    
    LiveServer 后台会抓取对应的  http://localhost:12680/other_web/index.html，并显示返回的内容。
    
    而浏览器的url ，仍然是 LiveServer 设置的 url。
    
    如果代码服务器不可访问，LiveServer 就会忽略proxy属性，以默认的方式打开。

    通过这个方式，你可直接挂载工程目录到对应的tomcat, iis , wamp 目录进行处理。