sezze / prettier-plugin-django-alpine

Format Django tags and Alpine.js in HTML files
15 stars 2 forks source link

Django tags indentation gets lost #1

Open brablc opened 11 months ago

brablc commented 11 months ago

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.

sezze commented 11 months ago

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.

brablc commented 11 months ago

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?

sezze commented 11 months ago

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.

rakafo commented 1 month ago

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.

brablc commented 1 month ago

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

sezze commented 1 month ago

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 commented 1 month ago

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