How to customize HTML formatting with templ fmt?

[RafaelZasas]

I like having the templ LSP handle formatting since there can be html, go and javascript code in one file, however I really do not like the formatting applied to the html.

I normally work with prettier, and configure it such that all html tags have a single attribute per line.

I am working with templ and HTMX and I end up having 5 or more attributes on an element, along with the infinite length of tailwindcss class names.

It becomes difficult to see whats going on in a tidy manner.

Is there any way to customize the formatting of templ fmt?

Would it be possible to create a prettier plugin? I know that there is a prettier plugin for std library go templates that works perfectly.

Would love to hear if others have already solved this.

PS. I am using the templ LSP from Mason in neovim and I have set up tailwindcss, html and htmx to work with .templ files.

[jonerer]

Good initiative!

Regarding customization, I feel like there are two different issues open that point to wanting some kind of config file or similar: #230 #465 .

What kind of settings do you think would neccesitate a config file?

Another thing:

I am working with templ and HTMX and I end up having 5 or more attributes on an element, along with the infinite length of tailwindcss class names.

For this, if you insert a newline in your html element, templ breaks it into multiple lines upon running templ fmt.

Meaning:

# This works right now:
# Before:
<div id="myId" 
class="myclass" style="some: style;" />

$ templ fmt .

# After
<div
    id="myId" 
    class="myclass"
    style="some: style;"
/>

It doesn't solve long tailwind classes (or long alpine-related lines etc). But an easy way to break up html attributes into multiple lines is to just add a \n and have the editor hooked up with formatOnSave (or run templ fmt in air).

[RafaelZasas]

Regarding customization, I feel like there are two different issues open that point to wanting some kind of config file or similar: #230 #465 .

I did see the issue you posted and I also like the idea of standardizing the order of attributes.

What kind of settings do you think would neccesitate a config file?

I'm actually not entirely certain.
I assume there would be options to override only the html and potentially script components of the file since go fmt is opinionated in a way we all like.

Prettier doesn't have many options for customizing html formatting but it has enough! Maybe to borrow from their options?

Perhaps a templ fmt config file could have options for html, or let the user point to a prettier config file, or some other formatter. <- I have no idea if that last part is even possible or necessary.

For this, if you insert a newline in your html element, templ breaks it into multiple lines upon running templ fmt.

I saw you mention this in your issue, however it doesn't work the same for me.
I would be quite happy with the fmt as it is, if it didn't undo all my new lines.

For example, here is a component I am working on at the moment when I add the new lines:

templ EditDevelopmentDetailsForm(d models.Development) {
<form 
    class="grid grid-cols-1 grid-flow-row lg:grid-cols-2 gap-2 p-6 text-primary
    *:flex *:flex-col *:space-y-1">
    <div>
        <label for="name">Name</label>
        <input 
            type="text"
            name="name"
            class="input"
            placeholder="Name"
            value={ d.Name }
        />
    </div>
    <div>
        <label for="description">Description</label>
        <input 
            type="text"
            name="description"
            class="input"
            placeholder="Description"
            value={ d.Description }
        />
    </div>
    <div>
        <label for="address">Address</label>
        <input 
            type="text"
            name="Address"
            id="address"
            class="input"
            placeholder="Description"
            value={ d.Address } 
        />
    </div>
    <div>
        <label for="standSize">Stand Size</label>
        <input 
            type="number"
            id="standSize"
            name="StandSize"
            class="input"
            placeholder="Stand Size"
            value={ int(d.StandSize)}
        />
    </div>
    <div 
     class="flex !flex-col-reverse gap-4 md:!space-y-0 md:!flex-row
         md:justify-between lg:col-span-2 mt-4"
    >
        <button 
         type="submit"
         class="btn-primary"
        >
          Save
        </button>
        <button
         hx-get={ fmt.Sprintf("/admin/developments/%v/details", d.ID) }
         hx-target="#developmentDetailsSection"
         hx-swap="innerHTML"
         type="button"
         class="btn-secondary"
        >
          Cancel
        </button>
    </div>
</form>
}

This is what it looks like after formatting on save, or running :!templ fmt from neovim:

templ EditDevelopmentDetailsForm(d models.Development) {
<form class="grid grid-cols-1 grid-flow-row lg:grid-cols-2 gap-2 p-6 text-primary
    *:flex *:flex-col *:space-y-1">
    <div>
        <label for="name">Name</label>
        <input type="text" name="name" class="input" placeholder="Name" value={ d.Name } />
    </div>
    <div>
        <label for="description">Description</label>
        <input type="text" name="description" class="input" placeholder="Description" value={ d.Description } />
    </div>
    <div>
        <label for="address">Address</label>
        <input type="text" name="Address" id="address" class="input" placeholder="Description" value={ d.Address } />
    </div>
    <div>
        <label for="standSize">Stand Size</label>
        <input type="number" id="standSize" name="StandSize" class="input" placeholder="Stand Size" value={
            int(d.StandSize) } />
    </div>
    <div class="flex !flex-col-reverse gap-4 md:!space-y-0 md:!flex-row
         md:justify-between lg:col-span-2 mt-4">
        <button type="submit" class="btn-primary">
            Save
        </button>
        <button hx-get={ fmt.Sprintf("/admin/developments/%v/details", d.ID) } hx-target="#developmentDetailsSection"
            hx-swap="innerHTML" type="button" class="btn-secondary">
            Cancel
        </button>
    </div>
</form>
}

Notice on the input for standSize (the last input), it even decided to break the value attribute after the opening brace. What is the line length cut off for the templ formatter?
And where does it decide to break?

[RafaelZasas]

I managed to fix the formatting issue by telling my lsp that all templ files should be formatted by templ only.
I assume that since both html and templ were trying to format the file, html was overriding the formatting of templ.

[RafaelZasas]

However, it is becoming increasingly frustrating to use the templ formatter.

Can someone please explain the logic behind formatting like this:

				<ul class="flex flex-1 flex-col gap-y-4 space-y-1 overflow-y-auto px-3 py-4">
					for _, link := range adminLinks {
						<li class="flex items-stretch">
							<a
								class={
									`w-full cursor-pointer rounded-md px-3 py-2 text-sm font-medium hover:bg-surface
								                        hover:text-accent`, templ.KV("text-accent", isActiveLink(link, req)),
									templ.KV("text-primary-light", !isActiveLink(link, req)),
								}
								onclick="toggleSidebar()"
								href={ templ.SafeURL(link.Href) }
							>
								{ link.Text }
							</a>
						</li>
					}
				</ul>

[joerdav]

Discussion closed as per this issue: #576

[lukajincharadze]

`[Customizing the formatting of templ (templ LSP) output can indeed enhance readability, especially when dealing with complex HTML elements with multiple attributes and Tailwind CSS classes.

Here are a few potential approaches you could consider:

Customizing templ fmt:

Check if templ fmt provides any configuration options or command-line flags for customizing the formatting rules. Some formatting tools offer options to customize indentation, line breaks, and other formatting aspects.
If templ fmt doesn't provide built-in customization options, you could consider submitting a feature request or contributing to the templ project to add support for custom formatting rules.
Using Prettier:

Since you're already familiar with Prettier and find its formatting style preferable for HTML, consider using Prettier to format HTML code within templ files.
You can use Prettier's CLI or integrate it with your text editor (such as Neovim) to automatically format HTML code when you save the file.
Additionally, you might explore Prettier plugins or configurations specifically tailored for templ files.
Creating a Prettier Plugin:

If Prettier doesn't have native support for templ files, you could consider creating a Prettier plugin for templ.
Look into the documentation and examples for creating Prettier plugins. You may find existing Prettier plugins for similar templating languages that you can use as a reference.
Implement custom formatting rules for templ files within the Prettier plugin, such as breaking attributes onto separate lines or adjusting indentation.
Manual Formatting:

In cases where automatic formatting tools don't meet your needs, you can resort to manual formatting.
Develop consistent formatting conventions for your templ files and apply them manually as you write or modify the code.
Consider using text editor features such as code folding, syntax highlighting, and custom keyboard shortcuts to streamline the manual formatting process.](url)`

[a-h]

Is that the output of Chat GPT from the question? Did you mean to post that here?

[RafaelZasas]

I was thinking the exact same thing...