使用 Emmet 在 Django HTML 中启用 "!" 标签扩展-html教程-PHP中文网

使用 Emmet 在 Django HTML 中启用 "!" 标签扩展

霞舞

发布： 2025-10-02 19:12:01

原创

337人浏览过

使用 emmet 在 django html 中启用

本文将指导你如何配置 VS Code，使其支持在 Django HTML 文件中使用 Emmet 的 "!" 标签扩展，以便快速生成 HTML 模板。

配置 VS Code 以启用 Emmet 扩展

要启用 Emmet 在 Django HTML 文件中的 "!" 标签扩展，你需要进行以下配置：

打开 VS Code 设置:
- 你可以通过菜单栏选择文件 -> 首选项 -> 设置，或者直接使用快捷键 Ctrl + , (Windows/Linux) 或 Cmd + , (macOS) 打开设置。
找到 Emmet 设置:

立即学习“前端免费学习笔记（深入）”；
- 在设置搜索框中输入 "Emmet"，找到与 Emmet 相关的设置项。
启用 Tab 键扩展:
- 找到 Emmet: Trigger Expansion On Tab 设置项，并勾选该选项。或者，你可以在 settings.json 文件中添加以下配置：
```
"emmet.triggerExpansionOnTab": true
```
登录后复制
这个设置允许你使用 Tab 键来扩展 Emmet 缩写。
设置显示扩展后的缩写:
- 找到 Emmet: Show Expanded Abbreviation 设置项，并将其设置为 always。或者，你可以在 settings.json 文件中添加以下配置：
```
"emmet.showExpandedAbbreviation": "always"
```
登录后复制
这个设置会在你输入 Emmet 缩写时，显示扩展后的 HTML 代码预览，方便你确认是否正确。

慧中标AI标书
慧中标AI标书是一款AI智能辅助写标书工具。

120

查看详情
关联 Django HTML 文件类型:
- 确保 Emmet 能够识别 Django HTML 文件。在 Emmet: Include Languages 中，添加或修改配置，将 django-html 或 html 与 Emmet 关联。例如：
```
"emmet.includeLanguages": {
    "django-html": "html",
    "javascript": "javascriptreact"
}
```
登录后复制
这个配置告诉 Emmet，将 django-html 文件类型视为 html 类型，从而启用 Emmet 的 HTML 相关功能。

使用 "!" 标签快速生成 HTML 模板

完成上述配置后，你就可以在 Django HTML 文件中使用 "!" 标签来快速生成 HTML 模板了。

打开一个 Django HTML 文件。
输入 "!" 标签，然后按下 Tab 键。
```
! <按下 Tab 键>
```
登录后复制

Emmet 将会自动扩展 "!" 标签，生成一个基本的 HTML 模板：

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

</body>
</html>

登录后复制