Format on django-html file does not work as expected within content blocks

[ebsaral]

• Operating System (+Version): Mac OS X 10.15.5

• VS Code Version: 1.47.0

• beautify Version: 1.5.0

VS Code Settings:

{
    "explorer.confirmDelete": false,
    "editor.formatOnSave": true,
    "explorer.confirmDragAndDrop": false,
    "docker-compose.files": [
        "local.yml"
    ],
    "javascript.updateImportsOnFileMove.enabled": "always",
    "files.associations": {
        "**/templates/**/*.html": "django-html",
        "**/templates/*": "django-txt",
        "**/requirements{/**,*}.{txt,in}": "pip-requirements"
    },
    "beautify.config": "",
    "beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautifyrc"
            ]
            // "ext": ["js", "json"]
            // ^^ to set extensions to be beautified using the javascript beautifier
        },
        "css": [
            "css",
            "scss"
        ],
        "html": [
            "htm",
            "html",
            "django-html"
        ]
        // ^^ providing just an array sets the VS Code file type
    },
    "python.formatting.provider": "black",
    "python.languageServer": "Pylance",
    "python.analysis.diagnosticMode": "workspace",
}

Action performed

Format html (django-html) file

Expected results

{% block extra_js %}
<script>
var data = $.parseJSON('{{ firms_json|safe }}'); 
var cityDropdown = $("#sessions-page-city");
var firmDropdown = $("#sessions-page-cinema");
var firmId = {{firm_id}};

function appendFirst(dropdown) {
    dropdown.append($("<option />").val(0).text("Seçim Yapın"));
}

function updateFirms(cityId) {
    firmDropdown.empty();
    appendFirst(firmDropdown);

    let values = data[cityId];
    
    if(values){
        $.each(values, function() {
            if(this.id == firmId){
                firmDropdown.append($("<option />").val(this.id).text(this.name).attr("selected", true))
            }
            else {
                firmDropdown.append($("<option />").val(this.id).text(this.name));
            }
                
        });
    }
}

</script> 
{% endblock extra_js %}

Actual results

Formatter makes the code like this, and breaks the format:

{% block extra_js %}
<script>
var data = $.parseJSON('{{ firms_json|safe }}'); 
var cityDropdown = $(" #sessions-page-city"); var firmDropdown=$("#sessions-page-cinema"); var firmId={{firm_id}};
                                function appendFirst(dropdown) { dropdown.append($("<option />").val(0).text("Seçim
                            Yapın"));
                            }

                            function updateFirms(cityId) {
                            firmDropdown.empty();
                            appendFirst(firmDropdown);

                            let values = data[cityId];

                            if(values){
                            $.each(values, function() {
                            if(this.id == firmId){
                            firmDropdown.append($("
                            <option />").val(this.id).text(this.name).attr("selected", true))
                            }
                            else {
                            firmDropdown.append($("
                            <option />").val(this.id).text(this.name));
                            }

                            });
                            }
                            }

                            </script>
                            {% endblock extra_js %}

What could be the issue and is there any workaround?

Thanks.

[pablodz]

This configuration works with me, and it's the same to your config. Really weird settings.json

{
   "files.associations":{
      "**/templates/*.html":"django-html",
      "**/templates/*":"django-txt",
      "**/requirements{/**,*}.{txt,in}":"pip-requirements"
   },
   "beautify.language":{
      "html":[
         "htm",
         "html",
         "django-html"
      ]
   }
}

Link: https://github.com/vscode-django/vscode-django/issues/23

[ebsaral]

@ZurMaD I have the same configuration. I have checked the link you sent, and seems like there is no internal django-html support in js-beautify. Thanks.