vscode HTML Boilerplate 插件用法

SCode的HTML Boilerplate插件是一个方便的工具，它可以帮助你更快地创建HTML文件，而无需每次都手动编写完整的HTML结构。以下是该插件的使用方法的详细说明：

安装插件：打开VSCode。点击左侧工具栏的最后一项“扩展”图标（或使用快捷键Ctrl+Shift+X在Windows或Linux上，Cmd+Shift+X在Mac上）。在搜索框中输入“HTML Boilerplate”。从搜索结果中找到HTML Boilerplate插件，并点击“安装”按钮。

使用插件：安装完成后，你可以通过以下两种方式之一来使用HTML Boilerplate插件：在新的空文件中输入“html”，然后按Tab键。这将自动生成一个干净的HTML文档结构。在新的空文件中输入“!”，然后按Tab键或Enter键。同样，这也会生成一个初始的、干净的HTML文档结构。

生成的HTML结构：使用HTML Boilerplate插件生成的HTML结构通常包括基本的HTML标签，如<html>, <head>, <title>, <body>等。这为你提供了一个良好的起点，以便你可以直接开始编写你的HTML内容。
注意事项：确保你已经正确安装了HTML Boilerplate插件，并且它在你当前使用的VSCode版本中可用。如果你在输入“html”或“!”后按Tab键或Enter键没有生成预期的HTML结构，请检查你的VSCode设置和插件状态，确保没有禁用或冲突的设置。
其他推荐插件（与HTML Boilerplate插件配合使用）： Auto Close Tag：此插件可以自动关闭你输入的HTML标签，提高编写效率。 HTML CSS Support：此插件为HTML和CSS代码提供智能提示和自动完成功能，帮助你更快地编写代码。 View In Browser 或 Open In Browser：这些插件允许你在浏览器中直接打开并查看你编写的HTML文件的效果。

通过结合使用这些插件，你可以大大提高在VSCode中编写HTML代码的效率和质量。

整理 | 祝涛

出品 | CSDN（ID：CSDNnews）

10 月 21 日消息，微软现已推出了可完全在浏览器中运行的轻量级 VS Code 网页预览版，该程序可以允许开发者直接使用浏览器中的 VS Code，无需使用本地安装版本进行开发。

早在 2019 年，微软就趁着 .dev 顶级域名开放注册时，申请了 vscode.dev、并将之重定向到code.visualstudio.com 。然而直到本周三，微软才正式发布了可完全在浏览器中运行的轻量级 VS Code 。这意味着开发者无需任何安装，就可以使用基于浏览器的 VS Code打开本地机器上的文件夹并开始编程工作。现在，当用户打开https://vscode.dev时，就会收到这个轻量级版本的 VS Code。

新的体验

基于浏览器的VS Code可提供以下体验：

可对本地文件进行查看和编辑。可以快速在Markdown中做笔记（并预览）即使您的设备受限而无法安装完整的VS Code，您依然可以使用vscode.dev来查看和编辑本地文件。
构建HTML、JavaScript 和CSS应用程序的客户端，并可结合浏览器工具进行调试。
可在很难安装VS Code的低功率机器（如 Chromebook）上编辑代码。
可以在iPad上使用。您可以上传/下载文件（甚至可以将文件存储在云中），还可以通过内置GitHub Repositories extension远程打开存储库。

除此之外，基于浏览器的 VS Code还内置了存储库（GitHub Repositories）、代码空间（Codespaces）和查询请求（Pull Request）扩展。

与GitHub.dev的区别

以下是基于浏览器的 VS Code与 GitHub.dev 在线编辑器的区别：

GitHub.dev 为深度集成到 GitHub 中的 Web 版 VS Code 定制实例，可以自动登录，URL 格式遵循 github.com 的 /organization/repo 格式，并且它是为 GitHub 定制的，允许用户简单地改变 .com 或 .dev 域名后缀来编辑某个 repo，具有亮色和暗色模式。除了 GitHub 上的存储库之外，基于浏览器的VS Code还支持 Azure Repos（作为 Azure DevOps 的一部分）。

微软在其官方博客中表示：“将 VS Code 植入浏览器是对该开发套件最初愿景的实现。对于 VS Code 也是一个全新的开始。人们只需要一台能联网的电脑和一个浏览器就可以在未来实现开发，在那种环境下人们可以随时随地的开发代码。期待未来的发展。”

参考链接：

https://mspoweruser.com/microsoft-vs-code-running-in-browser/
https://code.visualstudio.com/blogs/2021/10/20/vscode-dev


☞三大院士、十大数据库掌门人，岳麓对话开启数字经济新时代！
使用了12个月的苹果M1芯片，我发现了它的「致命」弱点

喽，大家好，我是木头左！

快速编译与执行

在开发过程中，频繁地编译和执行代码是必不可少的。而在VSCode中，通过简单的键盘操作即可完成这些操作，无需鼠标点击或多余的步骤。

Ctrl + Shift + B or Cmd + Shift + B

这个快捷键用于编译当前打开的文件。按下它，VSCode会使用你的编译器或构建工具来编译代码。

Ctrl + Shift + V or Cmd + Shift + V

如果你正在编写一个需要运行时环境的程序，例如Python或JavaScript，这个快捷键可以让你迅速运行当前的文件或程序。

调试利器：断点与步进

调试是开发过程中不可或缺的一部分，而VSCode提供了强大的调试工具，通过快捷键可以更加高效地进行调试。

F5

启动调试会话。如果你已经配置好了调试设置，按下F5，VSCode将自动开始调试你的应用程序。

F10

逐过程步进。在调试模式下，这个快捷键可以帮助你一行行地执行代码，从而更容易找到问题所在。

F11

逐语句步进。与F10类似，但F11会进入函数内部，帮助你更深入地理解代码逻辑。

项目管理：任务运行器

对于大型项目，经常需要运行特定的任务，如测试、打包或部署。VSCode的任务运行器可以通过快捷键快速执行这些任务。

Ctrl + Shift + P or Cmd + Shift + P

打开命令面板。通过这个快捷键，你可以搜索并运行任何已配置的任务。

Alt + Shift + N

如果你已经定义了多个任务，这个快捷键可以帮助你快速切换不同的任务。

版本控制：Git集成

VSCode内置了Git，使得版本控制变得简单而直观。以下是一些常用的Git相关快捷键。

Ctrl + / or Cmd + /

这是一个通用的注释/取消注释的快捷键，在查看差异时非常有用。

Ctrl + Shift + G or Cmd + Shift + G

添加所有更改到暂存区。这个快捷键可以快速将你在文件中所做的所有更改添加到Git暂存区，准备进行提交。

个性化设置：自定义快捷键

虽然VSCode提供了丰富的默认快捷键，但你可以根据自己的习惯进行自定义。

打开快捷键设置

通过File > Preferences > Keyboard Shortcuts或使用快捷键Ctrl + K Ctrl + S或Cmd + K Cmd + S，你可以查看所有的默认快捷键并进行自定义。

我是木头左，感谢各位童鞋的点赞、收藏，我们下期更精彩！

在线咨询

上一篇：第3天 - 16天搞定前端，html基础标签，一点都不基础？
下一篇：webpack4安装与学习讲解

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商