Visual Studio Code 和 Jinja 模板

Question

我有一段时间使用 VS 代码和一些扩展。当我使用 Flask 时，一切都很完美。

Prettier 将所有 Flask 代码粘合在一起，并且智能不适用于 Flask 代码：

 {% extends "layout.html" %} {% block style %} body {color: red; } {% endblock %}
{% block body %} you must provide a name {% endblock %}

我该怎么做才能让它与烧瓶一起工作（trie flask-snippets）？

我在 virtuel env 中运行它（在 lauch vscode 之前运行）。

提前致谢，

原文由 saquiel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

上述解决方案对我来说不太适用。我要么丢失了突出显示、自动完成或自动格式化。

我终于找到了一个解决方案，它给了我所有这些：

1. 安装“Better Jinja”或“Django”（双引号内更好的语法高亮）插件
2. 安装“djLint”插件
3. 按 CTRL + Shift + P 并输入 open settings json + Enter

这是我的配置，它非常适合我的神社模板。 djLint 提供了更多特定于文件类型的选项（请参阅 VS Code 中的扩展说明）。

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

我的神社模板使用扩展名 .jinja2 。为了使其与“Django”插件一起使用，我将其添加到我的设置中：

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

我现在唯一的抱怨是我无法让标签的链接编辑工作 :-D

原文由 ffrosch 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我也有类似的问题，这就是我修复它的方法：

1. 安装 Better Jinja 插件。 ( https://marketplace.visualstudio.com/items?itemName=samuelcolvin.jinjahtml )

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

2. 转到首选项 >> 设置 >> 在搜索设置栏中键入“文件关联”，单击“编辑 settings.json”

3. 最后将以下行添加到 settings.json 文件中：

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

1. 重新启动你的 vscode。每次你打开带有 jinja 模板代码的 html 文件时，只要选择了 jinja-html（不是 HTML！），prettify 就不会把它搞砸，你的智能感知应该工作得很好。 :)

原文由 Moby J 发布，翻译遵循 CC BY-SA 4.0 许可协议