Windows下VSCode开发及运行Web程序环境配置

前言

本文主要介绍在Windows操作系统下如何配置Visual Studio Code（VSCode）开发和运行调试网页。

---

一、安装VSCode

1、下载Visual Studio Code(以下简称VSCode)安装文件，下载地址为: https://code.visualstudio.com/

 2、下载好之后，双击安装包按提示进行安装即可。安装过程中有几下几个选项需要注意一下：

• 勾选“创建桌面快捷方式”;
• 可选“将Code添加到右键菜单，支持打开文件”；
• 可选“将Code添加到右键菜单，支持打开目录”；
• 不勾选“将Code注册为受支持的文件类型的编辑器”；
• 勾选“添加到PATH”。

---

二、开发Web程序

1、启动VSCode程序，点击 [文件] -> [打开文件夹] 菜单，如下图所示:

2、在弹出的“选择文件夹”对话框中，选择Web程序目录，如下图所示:

3、成功加载Web程序目录后，即可在左侧的树形目录中选择需要编辑的代码文件，双击打开进行编写代码即可，如下图所示:

---

三、运行调试Web程序

如果想在VSCode中直接运行开发好的Web程序，需要先安装Web服务器插件，方法如下：

1、点击VSCode左侧的扩展按钮，弹出拓展界面，如下图所示：

2、在扩展界面的搜索栏中，输入“Live Server”进行查找，在查找结果中找到“Live Server”插件，点击进行安装即可，如下图所示：

 3、安装完成“Live Server”插件后，重启VSCode，双击打开需要运行的Web网页，右击弹出菜单，如下图所示：

4、在上图的弹出右键菜单中，选择“Open with Live Server”选项，VSCode将自动调用默认浏览器打开网页，如下图所示：