我也遇到了类似的问题，这就是我解决它的方法：
1.安装Better Jinja插件。（https://marketplace.visualstudio.com/items?itemName=samuelcolvin.jinjahtml）

• 这将允许您将文件关联从普通的“HTML”更改为“jinja-html”（它位于我的vscode屏幕的右下角），这将阻止jinja代码在保存时相互粘连。
• 在这个阶段，你的智能感知将不再工作，造成很多烦恼，所以：

1.进入偏好设置>>设置>>在搜索设置栏中输入“文件关联”，点击“编辑设置. json”
1.最后，将下面一行添加到settings.json文件中：

"emmet.includeLanguages": {"jinja-html": "html"},

字符串
1.重新启动vscode。每次你打开一个带有jinja模板代码的html文件时，只要选择了jinja-html（而不是HTML！），prettify就不会把它弄得一团糟，你的智能感知应该工作得很好。
如果您使用材质图标主题扩展，则在将.html文件与jinja-html关联后，文件图标将断开。
要解决这个问题，请将其添加到settings.json

"material-icon-theme.languages.associations": {
        "jinja-html": "html"
    },
    "files.associations": {
    "*.html": "jinja-html"
   },
    "emmet.includeLanguages": {
        "jinja-html": "html"
    },

型

像下面的截图一样添加此

"files.associations": {
     "*.html": "jinja-html"
    },

字符串
[ screenshot ]

我尝试了一切，但最后，它为我工作。
1.安装Better Jinja插件。
1.安装Django插件
1.然后转到settings by pressing ctrl+,，搜索文件关联，然后转到后藤settings.json并编辑以下内容：
"files.associations": { "*.html": "jinja-html" },个
“ emmet .includeLanguages”：{“jinja-html”：“html”}，

好吧，所以我尝试了Ataua和Moby J的解决方案，但无法让它们工作。可能是因为我在全球范围内使用Prettier。
以下是对我有效的方法：
有一个名为Unibeautify的项目，它看起来有点像“一环统治一切”，用于将不同格式和文件类型的个性化设置捆绑在一起。
它有一个VS代码扩展名，VSCode-Unibeautify。
安装扩展后，你需要创建一个配置文件，并告诉VS Code在哪里可以找到它。如果你想在多种语言中使用它，你可以创建和自定义你自己的配置，但这里是我在Jinja中的工作：

# unibeautifyrc.yaml
HTML:
  beautifiers:
    - JS-Beautify
    - Pretty Diff

字符串
然后，在你的vscode设置中：

// settings.json
  "unibeautify.defaultConfig": "/PATH/TO/unibeautifyrc.yaml",
  "unibeautify.enabled": true,
  "[jinja-html]": {
    "editor.defaultFormatter": "Glavin001.unibeautify-vscode",
    "editor.formatOnSave": true
  },

型
我所做的也是将html文件与我项目的settings.json中的Jinja文件类型相关联。如果你只是想在项目基础上限制Unibeauty只使用Jinja文件，这会有所帮助。我认为如果你愿意，你也可以将下面的*.html更具体地应用于你的模板目录。

// MYPROJECT/.vscode/settings.json
{
  "files.associations": {
    "*.html": "jinja-html"
  }
}

型
这个解决方案由JS-Beautify提供支持，它似乎可以很好地与Jinja一起工作，并为Atoms atom-beautify扩展提供支持，该扩展也是由Unibeauty的同一作者Glavin001，一个美丽的个人提供支持。

前面提到的解决方案对我不太起作用。我要么失去了突出显示，自动完成或自动格式化。
我终于找到了一个解决方案，给了我这一切：
1.安装“更好的Jinja”或“Django”（双引号内更好的语法突出显示）插件
1.安装“djLint”插件
1.按CTRL + Shift + P，然后键入open settings json + Enter
这是我的配置，它对我的jinja模板很有用。djLint提供了更多特定于文件类型的选项（参见VS代码中的扩展描述）。

// settings.json
"emmet.includeLanguages": {
    "jinja2": "html",
    "jinja-html": "html",
    "django-html": "html",
},
"[jinja]": {
    "editor.defaultFormatter": "monosans.djlint",
    "editor.detectIndentation": false,
    "editor.tabSize": 2,
    "editor.formatOnSave": true,
},
"[jinja-html]": {
    "editor.defaultFormatter": "monosans.djlint",
    "editor.detectIndentation": false,
    "editor.tabSize": 2,
    "editor.formatOnSave": true,
},
"[django-html]": {
    "editor.defaultFormatter": "monosans.djlint",
    "editor.detectIndentation": false,
    "editor.tabSize": 2,
    "editor.formatOnPaste": true,
},

字符串
我的jinja模板使用扩展名.jinja2。为了让它与“Django”插件一起工作，我在我的设置中添加了以下内容：

// settings.json
"files.associations": {
    "*.jinja2": "django-html"
},

型
我现在唯一的抱怨是我不能让标签的链接编辑工作：-D

来自Mobi J的答案帮助了我，但我认为它是icomplete。解决我遇到的同样问题的方法是在settings.json的结尾添加这两行（最后一个括号之前）：

"emmet.includeLanguages": { "jinja-html": "html" },
    "editor.defaultFormatter": "vscode.emmet"

字符串
实际上，我是通过导航设置（Linux上的Ctrl+，）来实现的，但结果只是添加到settings.json文件中。
在此更改之后，intellisense和 emmet 都可以在.html和.jinja文件中工作。

在我的例子中，由于我使用prettier作为全局格式化程序，我必须将以下内容添加到settings.json中：

"[jinja-html]": {
        "editor.defaultFormatter": "vscode.emmet"
    },

字符串
您可以在设置的任何部分添加此设置，只需确保您位于最外面的括号内，并可能将其与其他类似设置粘贴在一起。