VS Code 对 HTML 的快捷功能支持

2022-12-16 408 阅读1分钟

参考文档：HTML in Visual Studio Code

通过简短的 Snippets（代码片段）快捷输入冗长的代码段

参考文档：Snippets in Visual Studio Code

和 Emmet 不同，Snippets 可以通过用户自定义的方式，规定快捷输入的具体规则
- 在 “文件-首选项-配置用户代码片段” 中进行设置
在 VS Code的扩展商店里，也可以下载到别人写好的 Snippets（输入 @category:"snippets" 搜索）

使用 Emmet 缩写自动补全完整代码

参考文档：Emmet-Cheat-Sheet、Emmet in Visual Studio Code

什么是 Emmet：Emmet 是一套面向文本编辑器的插件，可以帮助我们高速度地编写和编辑 HTML、XML、CSS和其他结构化的代码格式
- 它使用特定的语法来展开小段代码，使其成为完整的HTML代码
输入 Emmet 缩写后需要按 tab 或者 enter键进行展开缩写操作（具体如何设置不太清楚，以下内容统一按 tab）

初始化 HTML 结构

输入 ! 然后按 tab，即可得到以下内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

创建标签

创建 id 为 test 的 <div> 标签：输入 div#test，按下tab：
- 生成 <div id="id"></div>