prettier-plugin-django-alpine icon indicating copy to clipboard operation
prettier-plugin-django-alpine copied to clipboard

Django tags indentation gets lost

Open brablc opened this issue 2 years ago • 8 comments

I have code like this:

          {% for i in '01' %}
            {% cycle 'hidden lg:block' 'lg:hidden' as res_class silent %}
            {% for j in '012' %}
              {% if i == '0' %}
                {% cycle 'mt-1' 'my-1 parent-active:w-5' 'mb-1 parent-active:w-3' as line_class silent %}
              {% else %}
                {% cycle 'mt-1 parent-active:translate-y-[10px] parent-active:rotate-45' 'my-1 parent-active:opacity-0' 'mb-1 parent-active:translate-y-[-10px] parent-active:-rotate-45' as line_class silent %}
              {% endif %}
          <div
            class="{{ line_class }} {{res_class}} mx-1 h-1 w-7 rounded bg-gray-900 transition-all dark:bg-gray-100"></div>
            {% endfor %}
          {% endfor %}

And it gets all aligned to the first column. Any chance to keep the indentation intact? I know I can use <!-- prettier-ignore --> but sometimes the block is too big.

brablc avatar Nov 30 '23 11:11 brablc

The plugin currently doesn't support indenting inside Django tags. I have tried implementing it at some point but it required more rewriting than I had time to do at that point. I'll keep the issue open as I do want to support this eventually.

sezze avatar Nov 30 '23 15:11 sezze

I would probably be happy with this formatting - e.g. indenting inside tags instead of outside:

          {% for i in '01' %}
          {%   cycle 'hidden lg:block' 'lg:hidden' as resolution_class silent %}
          {%   for j in '012' %}
          {%     if i == '0' %}
          {%       cycle 'mt-1' 'my-1 parent-active:w-5' 'mb-1 parent-active:w-3' as line_class silent %}
          {%     else %}
          {%       cycle 'mt-1 parent-active:translate-y-[10px] parent-active:rotate-45' 'my-1 parent-active:opacity-0' 'mb-1 parent-active:translate-y-[-10px] parent-active:-rotate-45' as line_class silent %}
          {%     endif %}
          <div
            class="{{ line_class }} {{resolution_class}} mx-1 h-1 w-7 rounded bg-gray-900 transition-all dark:bg-gray-100"></div>
          {%    endfor %}
          {% endfor %}

And I have found that you remove the spaces in https://github.com/sezze/prettier-plugin-django-alpine/blob/main/index.mjs#L107 . Is there any good reason for this?

brablc avatar Nov 30 '23 17:11 brablc

I do it for consistency so that it looks the same between developers who add spaces and other developers who leave them out. But it's a good point and I'll add an option to disable it.

sezze avatar Nov 30 '23 18:11 sezze

sezze thank you for your hard work! I'm quite surprised your plugin isn't receiving much more praise - presumably that's because folks that are using jinja don't know prettier and thus don't know what they're missing. With emerging tech like htmx, tailwind seems like a lot of good could be gained for the community if the best formatter could work here. any chance you could work on this issue? I'd like to help myself, but I could only help with a small donation.

rakafo avatar Sep 23 '24 14:09 rakafo

I have created a PR #4 with my workaround for this.

brablc avatar Sep 23 '24 14:09 brablc

Thank you @brablc and @rakafo. @brablc's PR was merged, so this workaround is now possible. Ideally, I would still want to have a proper way of keeping indentation so I will keep the issue open.

sezze avatar Sep 24 '24 07:09 sezze

I have released a new version to npm, 1.3.0, with this change

sezze avatar Sep 24 '24 07:09 sezze

does it mean that indentation problem is fixed now because honestly i still have the same issues mentioned above about indentation inside django tags and thanks for your work. PS: right now as a workaround i first format the file with prettier along with your extension, then format using pycharm utility command that takes care of the indentation inside

ZougaRida avatar Jan 13 '25 09:01 ZougaRida