Interested in extending this project to include code formatting options for EE inside of HTML files

[rowansentesy]

Prerequisites

• Have you tried to reproduce the problem in with the extension disabled? n/a
• Have you checked that your issue isn't already filed? n/a

Description

I wasn't sure how to reach you so I'm filling this out as an alternative to a direct message or email.

I am exploring ways to build my own extension or a 'custom data format' for vs code to help with the code formatting of EE template tags.

I'd like it to support multi line wrapping similar to the "html.format.wrapAttributes": "force-expand-multiline" option in VS Code HTML Formatting settings.

An example of mult-line formatting in HTML:

Before:

<button mat-icon-button color="primary" class="menu-button" (click)="openMenu()">
    <mat-icon>menu</mat-icon>
</button>

After:

<button
    mat-icon-button
    color="primary"
    class="menu-button"
    (click)="openMenu()"
>
    <mat-icon>menu</mat-icon>
</button>

Here's an example of a EE tags and HTML content:

<ul>
    {exp:channel:entries
        channel="home_page"
        status="open"
        orderby="date"
        sort="desc"
        limit="1"
        dynamic="off"
        disable="categories|pagination|trackbacks"
        cache="yes"
        refresh="10"
    }
        <li class="widget-box widget-box-large no-link-expand">
            <div class="widget-inner">
                {exp:jcogs_img:pair 
                    src="{featured_image:url}" 
                    max_width="630" 
                    max_height="360" 
                    crop="yes" 
                    allow_scale_larger="yes"  
                    save_type="jpg" 
                }
                    <div class="widget-image container-fullsize" style="background-image: url('{made}');">
                        <img src="{made}" width="{width}" height="{height}" alt="{title}" class="fullsize-bg hidden"/>
                    </div><!-- /.widget-image -->
                {/exp:jcogs_img:pair}
                <div class="widget-content">
                    {featured_text}{EDIT_THIS}
                </div><!-- /.widget-content -->
            </div><!-- /.widget-inner -->
        </li><!-- /.widget -->
    {/exp:channel:entries}
</ul>

Presently, the HTML formatting options when run on this code produces the following:

<ul>
    {exp:channel:entries
    channel="home_page"
    status="open"
    orderby="date"
    sort="desc"
    limit="1"
    dynamic="off"
    disable="categories|pagination|trackbacks"
    cache="yes"
    refresh="10"
    }
    <li class="widget-box widget-box-large no-link-expand">
        <div class="widget-inner">
            {exp:jcogs_img:pair
            src="{featured_image:url}"
            max_width="630"
            max_height="360"
            crop="yes"
            allow_scale_larger="yes"
            save_type="jpg"
            }
            <div
                class="widget-image container-fullsize"
                style="background-image: url('{made}');"
            >
                <img
                    src="{made}"
                    width="{width}"
                    height="{height}"
                    alt="{title}"
                    class="fullsize-bg hidden"
                />
            </div><!-- /.widget-image -->
            {/exp:jcogs_img:pair}
            <div class="widget-content">
                {featured_text}{EDIT_THIS}
            </div><!-- /.widget-content -->
        </div><!-- /.widget-inner -->
    </li><!-- /.widget -->
    {/exp:channel:entries}
</ul>

You can see that the EE Tags indentation is removed, and the tags are considered content of the html tag wrapper.

I'd like to be able to run a formatter on an EE template and have it retain or improve EE code indentation as well as HTML indentation.

Is this something you'd be interested in collaborating on? Perhaps we could fork your existing extension, or do a PR to add what we come up with.

I think what you've got here is a really great start and also could use some updating and new features.

Let me know if you are open to discussing this and if you have any thoughts on the formatting/indentation.

Steps to Reproduce

n/a

Expected behavior:

n/a

Actual behavior:

n/a

Reproduces how often:

n/a

Versions

Please include the current extension version. Also, please include the OS and what version of the OS you're running.

Additional Information

Please feel free to reach out rowan@hopstudios.com or reply to this issue.

Thanks Rowan

[mindpixel-labs]

Hi @rowansentesy Sorry for the late reply. Let me review this more and get back to you but I am definitely interested.

[mindpixel-labs]

Hey @rowansentesy I am interested in collaborating and adding this feature as I notice my self formatting the EE tags like this more recently as it's just so much cleaner and readable. Were you interested in submitting a PR for this feature?

[rowansentesy]

Hey @mindpixel-labs Thanks for the reply and openness to collaborate! I would be interested in helping with this, although I will admit VS Code extensions are not something I've ever really developed before, so I'm a bit unsure how to go about it. If you have hints/ideas about where to start with the formatting possibilities, I'd be totally open to hearing them. But generally speaking, yes I'm keen to dive in to work on this and submit a PR once I get somewhere useful! Let me know if you'd be open to an onboarding Zoom or some other collaboration workflow to move this forward.

Rowan

[mindpixel-labs]

HI @rowansentesy Absolutely! I'd love to to setup either a Google Meet or Zoom to discuss a workflow and any strategies. Just let me know the best way to contact you. We could look at reviewing this after the New Year. Thanks!

[rowansentesy]

Hey @mindpixel-labs That sounds great. Please book a call with me on my calendly and we can get it on the calendar. https://calendly.com/rowanhop

Thanks Rowan

[mindpixel-labs]

Great, will do @rowansentesy Thank you!