详细教程:如何在vs code里面给普通的HTML搭建局域网服务器给其他设备访问
VS Code 服务器搭建教程
视频讲解:
vscode普通html项目如何搭建服务器_哔哩哔哩_bilibili
一、准备工作
在开始搭建 VS Code 服务器之前，请确保你已经在电脑上安装好了 VS Code 软件。如果尚未安装，可以前往 VS Code 官方网站（Visual Studio Code - Code Editing. Redefined ）下载对应系统版本的安装包，并按照安装向导完成安装。
二、打开 VS Code
找到桌面上的 VS Code 图标（通常是蓝色背景，白色代码符号的图标），双击打开 VS Code 应用程序。打开后的界面大致如下：
三、新建或使用现有的 HTML 项目
（一）新建 HTML 项目
- 在 VS Code 主界面，点击左侧菜单栏中的 “资源管理器” 图标（文件夹形状），或者使用快捷键Ctrl+Shift+E（Windows/Linux 系统）、Command+Shift+E（Mac 系统），打开资源管理器面板。
- 在资源管理器面板中，点击右上角的 “新建文件夹” 按钮，创建一个新的文件夹用于存放你的 HTML 项目。例如，命名为 “my - html - project”。
- 右键点击新建的文件夹，在弹出的菜单中选择 “新建文件”，然后输入文件名 “index.html”（注意文件扩展名必须是.html），按下回车键确认创建。此时，资源管理器中会出现 “index.html” 文件，双击该文件即可在编辑器区域打开它，你可以开始编写 HTML 代码。
（二）使用现有的 HTML 项目
如果你已经有一个现成的 HTML 项目文件夹，在 VS Code 主界面中，点击左上角的 “文件” 菜单，选择 “打开文件夹”，在弹出的文件选择窗口中，找到并选中你的 HTML 项目文件夹，点击 “打开” 按钮。此时，该项目中的所有文件和文件夹都会显示在资源管理器面板中，找到并双击 “index.html” 文件将其打开。
四、右键代码区域
在打开的 “index.html” 文件的代码编辑区域内，任意空白处点击鼠标右键（确保不要选中任何代码），此时会弹出一个右键菜单
五、选择 Open with Live Server 选项
在弹出的右键菜单中，找到 “Open with Live Server” 选项并点击。请注意，一定要选择 “Open with Live Server”，而不是 “Open In Default Browser” 。点击后，VS Code 会自动启动一个本地服务器，并在默认浏览器中打开你的 HTML 页面（此处可插入浏览器打开页面后的截图，显示页面内容和地址栏）。
六、获取服务器地址
- 打开电脑中的命令提示符（CMD）程序。在 Windows 系统中，可以通过按下Win+R组合键，在弹出的 “运行” 对话框中输入 “cmd”，然后点击 “确定” 打开命令提示符；在 Mac 系统中，可以在 “应用程序” 文件夹中找到 “实用工具”，打开 “终端” 程序。
- 在命令提示符窗口中，输入命令 “ipconfig”（Windows 系统）或 “ifconfig”（Mac/Linux 系统），然后按下回车键。此时，命令提示符会显示当前电脑的网络配置信息。
- 在显示的网络配置信息中，找到与你当前网络连接对应的 IP 地址。例如，在 Windows 系统中，通常在 “以太网适配器 以太网” 或 “无线局域网适配器 WLAN” 下的 “IPv4 地址” 后面的值就是你的 IP 地址；在 Mac 系统中，找到 “en0” 或 “en1” 等网络接口对应的 “inet” 后面的值。
- 结合 VS Code 服务器的默认端口号（5500）和默认文件（index.html），最终的服务器地址格式为：http://你的IP地址:5500/index.html 。例如，如果你的 IP 地址是 192.168.1.100，那么完整的服务器地址就是http://192.168.1.100:5500/index.html 。
通过以上步骤，你就成功搭建并获取了 VS Code 的服务器地址，可以在浏览器中通过该地址访问你的 HTML 项目。如果在操作过程中遇到任何问题，可以随时查阅相关资料或在技术论坛中寻求帮助。
以上教程涵盖了搭建 VS Code 服务器的全流程。若你在操作时遇到问题，或想补充特定环节内容，欢迎随时和我说。