Django VSCode：如何按预期制作 django-html 格式？

Question

I've seen a ton of unanswered questions about VSCode formatting (and if not here, where do you ask these questions?).我已经看到了大量关于 VSCode 格式的未解决问题（如果不在这里，你在哪里问这些问题？）。

There are 2 main issues I run into constantly when I'm trying to write django-html templates.当我尝试编写 django-html 模板时，我经常遇到两个主要问题。

1. Basic HTML tag linebreak doesn't occur in django-html files. 1. 基本的 HTML 标记换行符不会出现在 django-html 文件中。

When you write an html tag, and press enter inside of it, it should split the tag with an empty line in the middle like.当您编写 html 标签并在其中按 Enter 键时，它应该使用中间的空行分割标签。

Expected behavior (pipe "|" represents the cursor):预期行为（管道“|”代表光标）：

<!-- Write the tag -->
<div>|</div>

<!-- Press enter -->
<tag>
  |
</tag>

Here's what's happening in the django-html file after enter:以下是输入后 django-html 文件中发生的情况：

<!-- Press enter -->
<tag>
|</tag>

How do you fix this WITH proper template tag formatting (below)?你如何用正确的模板标签格式来解决这个问题（如下）？

2. Django template tags don't indent as expected. 2. Django 模板标签没有按预期缩进。

Tags within if, with, block, etc. tags should be indented. if、with、block 等标签内的标签应缩进。 (treated like html) Expected result: （像 html 一样处理）预期结果：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    {% if x %}
      <p>I did x</p>
    {% else %} 
      <p> I did else</p>
    {% endif %}
    <nav class="navbar">
    </nav> 
    {% block content %}
      <div class="content">
        <p>I'm in contente</p>
      </div>
    {% endblock %}
  </body>
</html>

Instead, the html tags within the django template tags are flattened on the same indent level.相反，django 模板标签中的 html 标签在相同的缩进级别上被展平。 Actual result:实际结果：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    {% if x %}
    <p>I did x</p>
    {% else %} 
    <p> I did else</p>
    {% endif %}
    <nav class="navbar">
    </nav> 
    {% block content %}
    <div class="content">
      <p>I'm in contente</p>
    </div>
    {% endblock %}
  </body>
</html>

Also if you're extending a template:此外，如果您要扩展模板：

{% extends 'base.html' %} 

{% block main %}
  <div>
  </div>
{% endblock %}

What happens:怎么了：

{% extends 'base.html' %}

{% block main %}
<div>
</div>
{% endblock %}

Conclusion结论

I've used both beautify and prettier to try to solve the problems, but neither did the expected behavior 100% (especially with the template tags), but they did help.我已经使用 beautify 和 prettier 来尝试解决问题，但预期的行为也没有 100%（尤其是使用模板标签），但它们确实有帮助。

I believe with slight tweaks they could have the expected behavior and treat django template tags as html tags AND have the html linebreak feature.我相信只要稍加调整，他们就可以有预期的行为，并将 django 模板标签视为 html 标签，并具有 html 换行功能。

How do you get these to format with these 2 simple specifications correctly?你如何用这两个简单的规范正确地格式化这些？

Answer 1

I got the desired result by using the Twig Language 2 extension and putting the following in my project settings:通过使用Twig 语言 2扩展并将以下内容放入我的项目设置中，我得到了预期的结果：

  "files.associations": {
    "*.html": "twig"
  },

Django VSCode：如何按预期制作 django-html 格式？

问题描述

1. Basic HTML tag linebreak doesn't occur in django-html files. 1. 基本的 HTML 标记换行符不会出现在 django-html 文件中。

2. Django template tags don't indent as expected. 2. Django 模板标签没有按预期缩进。

Conclusion结论

1 个解决方案

解决方案1
0 2022-09-14 11:48:51

Django VSCode：如何按预期制作 django-html 格式？

问题描述

1. Basic HTML tag linebreak doesn't occur in django-html files. 1. 基本的 HTML 标记换行符不会出现在 django-html 文件中。

2. Django template tags don't indent as expected. 2. Django 模板标签没有按预期缩进。

Conclusion结论

1 个解决方案

解决方案1 0 2022-09-14 11:48:51

解决方案1
0 2022-09-14 11:48:51