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

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

我在美德环境中运行它（在 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

好的，所以我尝试了 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中的 Jinja 文件类型相关联。 如果您只想在一个项目的基础上将 Unibeautify 的使用限制为仅 Jinja 文件，这将很有帮助。 如果您愿意，我认为您还可以使以下*.html更具体到您的模板目录。

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

该解决方案由JS-Beautify提供支持，它似乎与 Jinja 配合良好，并为 Atoms atom-beautify扩展提供支持，同样由 Unibeautify 的同一作者Glavin001 提供，一个漂亮的人。

Answer 3

像下面的截图一样添加这个

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

[截图]

Answer 4

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

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

我实际上是通过导航设置（在 Linux 上为Ctrl + ）来实现的，但结果只是对 settings.json 文件的添加。

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

Answer 5

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

1. 安装 Better Jinja 插件。

2. 安装 django 插件

3. 然后by pressing ctrl+进入设置，并搜索文件关联并转到 settings.jason 并通过此文件进行编辑

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

“emmet.includeLanguages”：{“jinja-html”：“html”}，

Answer 6

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

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

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-templates 使用扩展名.jinja2 。 为了使其与“Django”插件一起使用，我将其添加到我的设置中：

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

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