VSCode如何配置本地服务器

Vscode是一个开源的且非常轻量好用的IDE,和Sublime一样,拥有很多的插件使得VsCode很强大,在Sublime中我们可以通过插件配置本地服务器,当然在VSCode中同样可以做到,请看下面方法,顺便附上Sublime的配置方法

Sublime Text 3怎么配置本地服务器?


VSCode如何配置本地服务器_第1张图片

工具/原料

VsCode

方法/步骤

1

还未安装VsCode的童鞋,自行百度搜索Vscode,进入第一个链接下载安装即可,这里就不详细介绍下载安装过程了

2

打开VsCode的插件安装功能,在左侧的最底部位置

VSCode如何配置本地服务器_第2张图片

接着在输入框中搜索【live Server】

VSCode如何配置本地服务器_第3张图片

找到同名插件,第一个就是啦,点击【安装】

VSCode如何配置本地服务器_第4张图片

安装完成后点击【重新加载】

VSCode如何配置本地服务器_第5张图片

从新启动VScode后,你会发现在软件的右下角的状态栏中出现了【Go Live】这个就是启动刚刚安装的插件开关啦,

VSCode如何配置本地服务器_第6张图片

点击启动服务器,会自动运行系统默认的浏览器,如图

VSCode如何配置本地服务器_第7张图片

到这里说明服务器以及能跑起来了,我们只需要开发index文件,运行即可,默认是显示项目中所有的文件和文件夹

回到VsCode再次点击即可关闭服务器


VSCode如何配置本地服务器_第8张图片

同学会发现默认是5500端口,那么万一端口冲突呢,或者我们需要自己设置端口呢,接下来就简单介绍下如何设置服务器的端口和代理。当然如果端口冲突,插件会自动启动其他端口的,这个大家不必担心,放心使用即可

点击【文件】=【首选项】=【设置】

VSCode如何配置本地服务器_第9张图片

搜索关键字【liveserver】一直往下找,我们可以找到live Server相关设置

liveServer.settings.port 是设置端口的

liveServer.settings.proxy是设置代理的

其他设置大家可以自己查看

VSCode如何配置本地服务器_第10张图片

VScode如何配置本地服务器

你可能感兴趣的:(VSCode如何配置本地服务器)