Visual Studio Code 和 Jinja 模板

Question

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

Prettier 将所有烧瓶代码粘在一起，而智能对烧瓶代码不起作用：

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

我该怎么做才能使它与烧瓶（特里烧瓶片段）一起使用？

我在美德环境中运行它（在 lauch vscode 之前运行）。

提前致谢，

Answer 1

我也遇到了类似的问题，这就是我为解决它所做的：

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

4. 重新启动你的 vscode。每次打开带有 jinja 模板代码的 html 文件时，只要选择了 jinja-html（不是 HTML！），prettify 就不会搞砸，并且您的智能感知应该可以正常工作。:)

Answer 2

像下面的屏幕截图一样添加它

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

[截屏]

Answer 3

我已经尝试了一切，但最后，它对我有用。

1. 安装 Better Jinja 插件。

2. 安装 django 插件

3. 然后转到 settings by pressing ctrl+,，搜索文件关联并转到 settings.json 并编辑以下内容：

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

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

Answer 4

好的，所以我尝试了 Ataua 和 Moby J 的解决方案，但无法让它们发挥作用。也许是因为我在全球范围内使用 Prettier。

这对我有用：

有一个名为Unibeautify的项目，它看起来有点像“一环统治一切”，用于将不同格式化程序和文件类型的个性化设置联系在一起。

它有一个 VS Code 扩展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. 如果您只想将 Unibeautify 的使用限制为逐个项目的 Jinja 文件，这会有所帮助。*.html如果您愿意，我认为您还可以使下面的内容更具体到您的模板目录。

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

该解决方案由JS-Beautify提供支持，它似乎与 Jinja 配合良好，并支持 Atoms原子美化扩展，该扩展也是由 Unibeautify 的同一作者Glavin001提供的，一个美丽的个体。

Answer 5

上述解决方案对我来说不太有效。我要么失去了突出显示、自动完成或自动格式化功能。

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

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

这是我的配置，它非常适合我的 jinja 模板。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,
},

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

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

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

Answer 6

Mobi J的答案对我有帮助，但我认为它是不完整的。解决我遇到的同样问题的方法是在 settings.json 的最后添加这两行（在最后一个右括号之前）：

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

实际上，我是通过导航“设置”（在 Linux 上为 Ctrl + ）来完成此操作的，但结果只是对 settings.json 文件进行了添加。

更改后，intellisense 和 emmet 在 .html 和 .jinja 文件中都可以正常工作。