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 [email protected] or reply to this issue.
Thanks
Rowan