vscode如何开启本地服务

1. 简介

VS Code 是一款轻量级的代码编辑器,它可以满足日常开发的需要。

2. 安装插件

为了在 VS Code 中开启本地服务,我们需要安装一个名为 Live Server 的插件。

安装方法如下:

在 VS Code 的菜单栏中选择 扩展

在搜索框中输入 Live Server

选择扩展列表中的 Live Server 插件

点击 安装 按钮

3. 开启本地服务

当插件安装完成后,在文件编辑器中打开一个 HTML 文件。右键菜单中会多出一个 Live Server 的选项。点击该选项会在浏览器中打开这个 HTML 文件,并且在 URL 前面加上 http://localhost:5500/。

3.1 更改端口

如果想要更改端口号,可以按下 F1 或 CTRL+SHIFT+P 快捷键,然后在搜索框输入 Live Server: Open with Live Server,选择 Preferences: Open User Settings,在打开的文件中找到 liveServer.settings.port 设置项,将端口号更改为想要的数字即可。

3.2 同步滚动

在 Live Server 的默认设置中,滚动文件编辑器和浏览器的内容是相互独立的。如果希望两者能够同步滚动,可以按下 F1 或 CTRL+SHIFT+P 快捷键,然后在搜索框输入 Live Server: Toggle Scroll Sync。

4. 使用文件夹作为根目录

可以将整个文件夹当作网站的根目录,Live Server 在启动时会在当前文件夹内搜索 HTML 文件,并将它们作为可访问的网页。

方法如下:

在 VS Code 的菜单栏中选择 文件

在选择菜单中点击 打开文件夹

选择想要启动的文件夹

右键单击文件夹,在菜单中选择 在 Live Server 中打开

4.1 使用特定的 HTML 文件

如果想要在启动时使用特定的 HTML 文件,可以创建一个名为 index.html 的文件,并将它放在文件夹的根目录中。

5. 总结

使用 Live Server 插件可以方便地在 VS Code 中开启本地服务,并且可以实时预览页面的效果。在日常开发中,这款插件也是非常实用的。