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 中开启本地服务,并且可以实时预览页面的效果。在日常开发中,这款插件也是非常实用的。