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

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

霞舞

发布： 2025-10-02 20:38:01

原创

810人浏览过

使用 emmet 在 django html 中启用

本文旨在解决在 Django HTML 文件中使用 Emmet "!" 标签无法正常展开的问题。通过配置 VS Code 的 Emmet 插件，并启用 Tab 键展开和显示展开后的缩写，可以成功在 Django HTML 文件中使用 "!" 标签快速生成 HTML 模板。

Emmet 是一款强大的代码补全工具，可以极大地提高 HTML、CSS 等代码的编写效率。在 VS Code 中，Emmet 默认支持 HTML 文件，但在 Django HTML 文件中，某些 Emmet 缩写可能无法正常工作，例如 "!" 标签。本文将详细介绍如何在 VS Code 中配置 Emmet，使其能够在 Django HTML 文件中正常使用 "!" 标签。

配置 Emmet 插件

打开 VS Code 设置： 可以通过以下两种方式打开设置：

立即学习“前端免费学习笔记（深入）”；
- 点击菜单栏的文件 (File) -> 首选项 (Preferences) -> 设置 (Settings)。
- 使用快捷键 Ctrl + , (Windows/Linux) 或 Cmd + , (macOS)。
搜索 Emmet： 在设置搜索框中输入 "Emmet"，找到 Emmet 相关的设置项。
启用 Tab 键展开： 默认情况下，Emmet 使用 Tab 键展开缩写。如果 Tab 键没有生效，请确保 emmet.triggerExpansionOnTab 设置项的值为 true。如果该设置项不存在，请手动添加以下配置到 settings.json 文件中：

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

120

查看详情

"emmet.triggerExpansionOnTab": true

登录后复制

显示展开后的缩写： 为了更好地预览 Emmet 展开后的效果，建议将 Show Expanded Abbreviation 设置项设置为 always。这样，在输入 Emmet 缩写时，VS Code 会实时显示展开后的代码。

示例

配置完成后，在 Django HTML 文件中输入 "!"，然后按下 Tab 键，即可快速生成 HTML 模板：

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

</body>
</html>

登录后复制

注意事项