Visual Studio Code 和 Jinja 模板

Question

我使用 VS code 一段时间了，并带有一些扩展。 当我使用 Flask 时，一切都很完美。

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

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

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

我在virtuall env中运行它（在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 就不会搞乱它，你的智能感知应该工作得很好。 :)

如果您使用 Material Icon Theme 扩展，则将 .html 文件与 jinja-html 关联后，文件图标会损坏。

要解决这个问题，请将其添加到您的settings.json

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

Answer 2

像下面的截图一样添加它

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

[]

Answer 3

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

1. 安装 Better Jinja 插件。

2. 安装django插件

3. 然后转到设置

   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

中的 Jinja 文件类型关联起来。如果您只想将 Unibeautify 的使用限制为逐个项目的 Jinja 文件，这会有所帮助。如果您愿意，我认为您还可以使下面的

*.html

更具体到您的模板目录。

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

此解决方案由 JS-Beautify 提供支持，它似乎与 Jinja 配合良好，并支持 Atoms atom-beautify 扩展，也是由 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 文件中都可以正常工作。

Answer 7

就我而言，由于我使用 prettier 作为全局格式化程序，因此我必须将其添加到 settings.json 中：

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

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