vscode html autoformato en plantilla django

Me encanta VSCode en guardar formato automático hasta que se estropeó con mi código de plantilla.

Formatea incorrectamente la sintaxis de mi plantilla de django en un código de una línea (a veces, una línea muy larga). Así que en lugar de tener este código

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

Termino teniendo este código

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

Traté de deshabilitar el formato al guardar cambiando la configuración del usuario a {"editor.formatOnSave": false} pero todavía no he tenido suerte.

¿Hay alguna configuración que pueda usar para que funcione mejor?

PD: estoy usando VSCode versión 1.9 en Sierra MacOSx

Utilicé la extensión beautify en su lugar, que funcionó de inmediato mientras más bonito todavía se estaba poniendo en una línea. El crédito es para kimanihuon en esta página de stackoverflow.

1. Agregue lo siguiente a settings.json

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

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

2. Instale beautify y luego agregue lo siguiente a settings.json

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

3. Reinicie VSCode por si acaso

Alexa tiene un buen punto en su respuesta. El modo de archivo debe cambiarse en “Django/HTML” para evitar que VS CODE lo formatee.

¿Cómo cambiar el modo de archivo?

Una solución rápida es usar esta extensión llamado vscode-Django y ajuste su configuración de esta manera como se dice en su documentación.

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

Con estos ajustes, cualquier archivo ubicado en la carpeta de plantillas se considerará como un archivo de plantilla de Django y no se verá afectado por el formato automático de HTML.

PD: La extensión todavía está en modo de vista previa, espero que mejore con el tiempo.

Cambiar el modo de idioma del archivo a “Django/HTML” también evitará que VSCode lo formatee automáticamente.

puede deshabilitar el formateador de html predeterminado, vaya a Archivo > Preferencias > Configuración de usuario o espacio de trabajo, en la configuración de HTML encontrará:

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

Creo que VSCode usa js-beautify como formateador predeterminado, puedes usar embellecer la extensión para anular su configuración con .jsbeautifyrc en el directorio del proyecto

Tuve el mismo problema, encontré una publicación en la que la persona deshabilitó la extensión JS-CSS-HTML Formatter (https://stackoverflow.com/a/42100808/4812548) y solucionó el problema. Probado en el mío y parece haber funcionado también. Espero que ayude

Más bonito en VSCode fue el culpable en mi situación. Conseguí que dejara de formatear con lo siguiente en mi 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 establece el modo de idioma para las plantillas en django-html.
[django-html] establece la configuración para ese modo de idioma. Al momento de escribir esto, el formateador en batisteo.vscode-django no hace nada por mí (así que es lo mismo que null en su lugar), pero lo dejé allí en caso de que la extensión django alguna vez lo haga.

Puede deshabilitar la opción de formato para algunos de los idiomas:

Vaya a Extensiones y luego a “Configuración de extensiones” de Prettier y agregue django-html para este caso como se muestra a continuación.