Django 模板 {% if %} 标签空格被自动删除？VS Code 环境解决方案

在开发 Django 项目时，我遇到一个常见问题：本地 IDE（VS Code）在保存 HTML 模板时，会自动删除 {% if %} 标签两边的空格，导致模板逻辑失效。

例如，原始代码：

<option value="5" {% if page_size == 5 %}selected{% endif %}>5</option>

保存后可能被自动格式化为：

<option value="5" {% if page_size==5 %}selected{% endif %}>5</option>

这会让模板逻辑出错。

---

原因分析

VS Code 或其他 IDE 的自动删除空格通常是由以下几个因素引起的：

1. "保存时格式化（Format On Save）" 功能自动调整 HTML/模板格式。

2. HTML 格式化插件（如 Prettier、Beautify）默认不识别 Django 模板语法。

3. VS Code 默认将 .html 文件当作普通 HTML 文件处理，导致 {% ... %} 标签被误格式化。

---

解决方案

方法 1：通过命令面板打开（最通用）

1. 按下 Ctrl + Shift + P（Windows / Linux）或 Cmd + Shift + P（macOS）

2. 输入 Preferences: Open Settings (JSON)

3. 回车即可打开完整的 settings.json 文件

在这里你可以直接添加配置，比如：

"editor.formatOnSave": false, "files.trimTrailingWhitespace": false

---

方法 2：手动打开项目级 .vscode/settings.json

1. 在你的项目根目录，新建一个 .vscode 文件夹（如果没有）

2. 在里面新建 settings.json

3. 粘贴配置，例如：

{
    "editor.formatOnSave": false,
    "files.trimTrailingWhitespace": false,
    "[html]": {
        "editor.formatOnSave": false
    },
    "[django-html]": {
        "editor.formatOnSave": false
    }
}

这种方法可以针对当前项目生效，不影响全局设置。