分享给前端小白的超好用的vscode插件

这是我学习全栈路线HTML的第一篇文章！全栈路线

这篇文章是关于前端编辑器的使用。

编辑器可以选择vscode，这是微软的免费的编辑器，还支持很多插件。

现在分享一款超级好用的插件， Live Server 。

我们写前端页面，如果每次都需要写完代码手动保存，然后到浏览器进行刷新，是不是十分繁琐？

可不可以 我修改一行代码后，浏览器实时刷新效果呢？

当然可以！自动保存+ live server ，提高工作效率！

vscode 设置自动保存

在 VS Code 中，可以通过以下步骤来设置自动保存代码：

1. 打开 VS Code 编辑器，点击左下角的“设置”按钮（齿轮图标）或使用快捷键 “Ctrl + ，” 打开设置面板。

2. 在设置面板中搜索 “Auto Save”，找到 “Files: Auto Save” 设置项。

3. 将 “Files: Auto Save” 的值设置为 “afterDelay” 或 “onFocusChange”。

• “afterDelay” 表示在您停止编辑并等待一段时间后自动保存代码。
• “onFocusChange” 表示在您切换到其他应用程序或窗口时自动保存代码。

4. （可选）您还可以将 “Files: Auto Save Delay” 设置项的值更改为您希望的自动保存延迟时间，以毫秒为单位。

5. 保存设置并关闭设置面板。

在完成上述步骤后，VS Code 将自动保存您的代码，无需手动保存。这可以帮助您更加高效地进行开发，并避免因意外关闭编辑器或计算机崩溃等原因导致代码丢失问题。

VS Code Live Server 是一款 VS Code 的扩展插件，可以帮助开发者在本地开发环境中实现自动刷新页面的功能。具体来说，Live Server 可以在您保存代码时自动刷新浏览器页面，从而实现实时预览效果。

vscode设置实时刷新

使用 Live Server 插件非常简单，只需要在您的 HTML 文件上单击右键，然后选择 “Open with Live Server” 选项即可。

此时，Live Server 会自动打开一个新的浏览器窗口，并在其中加载您的 HTML 文件。

当您保存 HTML 文件时，Live Server 会自动刷新浏览器页面，以便您查看最新的效果。

除了自动刷新外，Live Server 还提供了其他一些有用的功能，例如支持 CSS 实时注入、支持 HTTPS、支持自定义端口等。这些功能可以帮助您更加高效地开发和调试 Web 应用程序。

需要注意的是，Live Server 只适用于本地开发环境，不应用于生产环境。在生产环境中，您需要使用专业的 Web 服务器来部署和运行您的应用程序。