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 } }

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