djlint / djLint

✨ HTML Template Linter and Formatter. Django - Jinja - Nunjucks - Handlebars - GoLang
https://djLint.com
GNU General Public License v3.0
686 stars 84 forks source link

[BUG] [Formatter] formatting not disabled inside {# djlint:off #} inside script tag #868

Open thacoon opened 2 months ago

thacoon commented 2 months ago

System Info

Issue

I am sometimes using django templating language inside the script tag. When I reformat the code this gets reformatted as well, so I want to ignore that part using {# djlint:off #}. However this is ignored by djlint and it tries to reformat the code resulting in broken javascript code, event {# djlint:off #} gets reformatted as well. Currently I can only ignore the whole script tag, then nothing gets reformated inside the script tag, but as soon as I only want to ignore a specific part inside it, everything gets reformatted, which then also breaks my JS code.

A similar issue was reported, which was fixed in version 1.0.0 #166, however in that previous error the {# djlint:off #} comments itself have not been affected, which is now the case.

How to Reproduce

<script>
    {# djlint:off #}
    const _steps = {
      {% for step in steps %}
        '{{ step.id }}': true
        {% if not forloop.last %},{% endif %}
      {% endfor %}
    };
    {# djlint:on #}

    document.addEventListener('alpine:init', () => {
        Alpine.data('steps-table', () => {
            return {
               steps: _steps, 
            };
        });
    });
</script>

I run djlint --reformat --format-js server/templates/ and get:

<script>
    {
        # djlint: off #
    }
    const _steps = {
        {
            %
            for step in steps %
        }
        '{{ step.id }}': true {
            %
            if not forloop.last %
        },
        {
            % endif %
        } {
            % endfor %
        }
    };
    {
        # djlint: on #
    }
    document.addEventListener('alpine:init', () => {
        Alpine.data('steps-table', () => {
            return {
                steps: _steps,
            };
        });
    });
</script>

Contents of .djlintrc/pyproject.toml [tool.djlint]

[tool.djlint]
ignore = "H006,H030,H031"
include = "H017,H035"
indent = 2
blank_line_after_tag = "load,extends"
profile = "django"
max_line_length = 120
format_attrite_template_tags = true
WellingtonNico commented 2 months ago

up, same problem here:

update: i bet it would happen with css also

before:

<script>

       {# djlint:off #}
       {% if not open_form %}
        console.log('my code that should not be formatted')
       {% endif %}
       {# djlint:on #}

    function my_function_that_should_be_indented() {
         $("#client_form").show();
             $("#list_users").hide();
    }
 </script>

after:

<script>
    {
      # djlint: off #
    } {
      %
      if not open_form %
    }
    console.log('my code that should not be formatted') {
      % endif %
    } {
      # djlint: on #
    }

    function my_function_that_should_be_indented() {
       $("#client_form").show();
       $("#list_users").hide();
    }
 </script>