django模板上的vscode html autoformat

Question

我喜欢保存autoformat的VSCode,直到它搞砸了我的模板代码.

它错误地将我的django模板语法格式化为一个行代码(有时真的很长).所以没有这个代码

{% for row in 'ABCDEFGH' %}
<tr>
  {% for col in '123456789012345' %}
    <td>
      {% with forloop.counter|stringformat:"s" as counter %}
        {% with row|add:counter as seat_num %}
          {% if seat_num not in oc_seats %}
            <input type="checkbox" value="{{ row }}{{ forloop.counter }}" name="seats">
          {% endif %}
          <br> {{ seat_num }} 
        {% endwith %}
      {% endwith %}
     </td>    
   {% endfor %}
</tr>
{% endfor %}

我最终得到了这个代码

{% for row in 'ABCDEFGH' %}
<tr>
  {% for col in '123456789012345' %}
  <td style="text-align: center; border: 1px solid #aaa;">
    {% with forloop.counter|stringformat:"s" as counter %} {% with row|add:counter as seat_num %} {% if seat_num not in oc_seats %}
    <input type="checkbox" value="{{ row }}{{ forloop.counter }}" name="seats"> {% endif %} {{ seat_num }} {% endwith %} {% endwith %}
  </td>
  {% endfor %}
</tr>
{% endfor %}

我试图通过将用户设置更改为禁用格式,{"editor.formatOnSave": false}但仍然没有运气.

是否有任何插件或配置可用于使其更好地工作？

PS:我在Sierra MacOSx上使用VSCode 1.9版

Answer 1

Alexa 在她的回答中有一个很好的观点。需要在“Django/HTML”中更改文件模式以防止 VS CODE 对其进行格式化。

如何更改文件模式？

一个快速的解决方案是使用这个名为 vscode-Django 的扩展，并像他的文档中所说的那样调整你的设置。

"files.associations": {
    "**/templates/*.html": "django-html",
    "**/templates/*": "django-txt"
}

通过这些设置，位于模板文件夹中的任何文件都将被视为 Django 模板文件，并且不会受到 HTML 自动格式化的影响。

PS：该扩展程序仍处于预览模式，希望它会随着时间的推移变得更好。

Answer 2

我使用了 beautify 扩展名，它立即起作用，而更漂亮的人仍然在一条线上。归功于此 stackoverflow页面上的kimanihuon。

1. 将以下内容添加到 settings.json

"files.associations": {
   "**/*.html": "html",
   "**/templates/*/*.html": "django-html",
   "**/templates/*": "django-txt",
   "**/requirements{/**,*}.{txt,in}": "pip-requirements"
},

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

2. 安装 beautify 然后将以下内容添加到 settings.json

"beautify.language": {
   "html": [
       "htm",
       "html",
       "django-html"
   ]
},

3. 重启 VSCode 以防万一

Answer 3

将文件的语言模式更改为“Django/HTML”也将阻止 VSCode 对其进行自动格式化。

Answer 4

VSCode 中的 Prettier 是我遇到的情况的罪魁祸首。我让它停止格式化，并在我的settings.json.

"files.associations": {
   "**/*.html": "html",
   "**/templates/*/*.html": "django-html",
   "**/templates/*": "django-txt",
   "**/requirements{/**,*}.{txt,in}": "pip-requirements"
},    
"[django-html]": {
   "editor.defaultFormatter": "batisteo.vscode-django"
},

files.associations将模板的语言模式设置为 django-html。 [django-html]设置该语言模式的设置。在写这篇文章时，格式化程序并batisteo.vscode-django没有为我做任何事情（所以它与它所在的位置相同null），但我将它留在那里，以防 django 扩展这样做。

Answer 5

我尝试过，现在强烈推荐djLint扩展来格式化 Django-HTML 代码。它非常有效并且非常可配置。

您需要安装Python 扩展（与 venv 一起使用）和VSCode 扩展。

使用您的代码，输出是：

{% for row in 'ABCDEFGH' %}
    <tr>
        {% for col in '123456789012345' %}
            <td style="text-align: center; border: 1px solid #aaa;">
                {% with forloop.counter|stringformat:"s" as counter %}
                    {% with row|add:counter as seat_num %}
                        {% if seat_num not in oc_seats %}
                            <input type="checkbox" value="{{ row }}{{ forloop.counter }}" name="seats">
                        {% endif %}
                        {{ seat_num }}
                    {% endwith %}
                {% endwith %}
            </td>
        {% endfor %}
    </tr>
{% endfor %}

Answer 6

您可以禁用默认的 html 格式化程序，转到文件 > 首选项 > 用户或工作区设置，在 HTML 设置中您将找到：

// Enable/disable default HTML formatter (requires restart)
  "html.format.enable": true,

我认为 VSCode 使用 js-beautify 作为默认格式化程序，您可以使用beautify 扩展通过项目目录中的 .jsbeautifyrc 覆盖它的设置