How to avoid formatting (to incorrect code) especially in <script> tags - django-html

badochov commented 5 years ago

Operating System (+Version): Windows 10
VS Code Version: 1.33.1
beautify Version: 1.4.11

NOTE: Please provide code snippets instead of screen shots. Your issue needs to be replicated, and we need the failing code (text) to do this.

Provide the settings you use: { "editor.minimap.enabled": false, "editor.renderControlCharacters": true, "breadcrumbs.enabled": false, "editor.renderWhitespace": "none", "editor.formatOnSave": true, "workbench.statusBar.visible": true, "workbench.colorTheme": "Material Theme Palenight High Contrast", "editor.multiCursorModifier": "ctrlCmd", "color-highlight.markerType": "dot-before", "python.linting.pylintPath": "pylint", "python.linting.pylintArgs": [ "--load-plugins", "pylint_django" ], "python.linting.pep8Enabled": true, "[python]": { "editor.defaultFormatter": "ms-python.python", }, "python.formatting.autopep8Args": [ "-a" ], "html.suggest.html5": true, "html.validate.scripts": true, "html.validate.styles": true, "html.format.enable": true, "C_Cpp.updateChannel": "Insiders", "workbench.iconTheme": "material-icon-theme", "workbench.colorCustomizations": {}, "emmet.triggerExpansionOnTab": true, "emmet.showSuggestionsAsSnippets": true, "editor.snippetSuggestions": "top", "[jsonc]": { "editor.defaultFormatter": "vscode.json-language-features" }, "beautify.language": { "css": [ "css", "scss" ], "html": [ "htm", "html", "django-html" ] // ^^ providing just an array sets the VS Code file type } }

Action performed

NOTE: i know that you do not support django-html so it's more of feature request than a bug Saved document format on save trigerred


{% load my_tags %}
{{user.pb.single}}
<style>
    .won {
        background: red;
    }
</style>

<body>
    <table id='times'>
        <thead>
            <tr id='usernames'>
                <th>#</th>
            </tr>
            <tr id='means'>
                <th>Mean</th>
            </tr>
            <tr id='aoWins'>
                <th>Wins</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="{% static 'room/js/preetifyTime.js' %}"></script>
    <script src="{% static 'room/js/user.js' %}"></script>
    <script>
        {%  block javascript %}
        let mainMethod = "{{user.main_method}}",
            roomName = "{{room.name}}",
            roomID = "{{room.id}}",
            noSolve = {{ room.nosolve.no_solve | add: '1' }},
            siteLink = "{{ request.get_host }}",
            userId = "{{user.id}}",
            sendTimeURL = "{% url 'room:send_time' %}",
            csrf = '{{ csrf_token }}',
            users = [],
            times = [],
            usersId = [],
            u; 
        {% for user in room.users %}
            u = {{ user.id }}
            usersId.push(u);
            times[u] = []; 
        {% endfor} 
        {% for time in room.time_set.all | dictsort: "no_time" %} 
            {% if time.user_id in room.usersID % }
                times['{{ time.user_id }}'][{{ time.no_time }}] = ({{ time.time }}); 
            {% endif %}
        {% endfor %}

        {% for user in room.users %}
            u = {{user.id}};
            users['u' + u] = new User("{{user.username}}", u, times[u]); 
        {% endfor %}

        {% endblock javascript %}
    </script>
    <script src="{% static 'room/js/roomView.js' %}"></script>
</body>```

## Expected results
django template tags should remain untouched mby some indentations added

## Actual results
While tags in html remained untouched those in script tag become completely unreadable as your extensions detects it as normal curly brackets

```{% load static %}
{% load my_tags %}
{{user.pb.single}}
<style>
    .won {
        background: red;
    }
</style>

<body>
    <table id='times'>
        <thead>
            <tr id='usernames'>
                <th>#</th>
            </tr>
            <tr id='means'>
                <th>Mean</th>
            </tr>
            <tr id='aoWins'>
                <th>Wins</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="{% static 'room/js/preetifyTime.js' %}"></script>
    <script src="{% static 'room/js/user.js' %}"></script>
    <script>
        {
            % block javascript %
        }
        let mainMethod = "{{user.main_method}}",
            roomName = "{{room.name}}",
            roomID = "{{room.id}}",
            noSolve = {
                {
                    room.nosolve.no_solve | add: '1'
                }
            },
            siteLink = "{{ request.get_host }}",
            userId = "{{user.id}}",
            sendTimeURL = "{% url 'room:send_time' %}",
            csrf = '{{ csrf_token }}',
            users = [],
            times = [],
            usersId = [],
            u; {
            %
            for user in room.users %
        }
        u = {
            {
                user.id
            }
        }
        usersId.push(u);
        times[u] = []; {
            % endfor
        } {
            %
            for time in room.time_set.all | dictsort: "no_time" %
        } {
            %
            if time.user_id in room.usersID %
        }
        times['{{ time.user_id }}'][{
            {
                time.no_time
            }
        }] = ({
            {
                time.time
            }
        }); {
            % endif %
        } {
            % endfor %
        }

        {
            %
            for user in room.users %
        }
        u = {
            {
                user.id
            }
        };
        users['u' + u] = new User("{{user.username}}", u, times[u]); {
            % endfor %
        }

        {
            % endblock javascript %
        }
    </script>
    <script src="{% static 'room/js/roomView.js' %}"></script>
</body>```

HookyQR commented 5 years ago

This is likely to be controllable with a setting. Will get back to you soon.

HookyQR commented 5 years ago

The best you can do is add "style" to the "unformatted" or the "content_unformatted" options in either the .jsbeautifyrc file, or within the beautify.config setting of VS Code.

HookyQR / VSCodeBeautify

How to avoid formatting (to incorrect code) especially in <script> tags - django-html #304

Action performed