prettier-plugin-templ
v0.2.2
Published
Prettier plugin for .templ files (github.com/a-h/templ) with HTML attribute sorting and Tailwind CSS class sorting
Downloads
379
Maintainers
gregmulvaneyReadme
prettier-plugin-templ
This whole thing is vibe coded by Claude Opus 4.6. Sorry if you try this and it breaks anything!
A Prettier plugin for formatting templ files.
Formats HTML structure, indentation, and Go control flow blocks inside .templ files. Optionally sorts HTML attributes and Tailwind CSS classes.
Installation
npm install --save-dev prettier-plugin-templPrettier will auto-discover the plugin. No additional configuration needed.
Usage
npx prettier --write "**/*.templ"Before
package main
templ page(title string, items []string) {
<html>
<head><title>{ title }</title></head>
<body class="bg-white p-4">
@heading(title)
for _, item := range items {
<div class="flex items-center">{ item }</div>
}
</body>
</html>
}After
package main
templ page(title string, items []string) {
<html>
<head>
<title>
{ title }
</title>
</head>
<body class="bg-white p-4">
@heading(title)
for _, item := range items {
<div class="flex items-center">
{ item }
</div>
}
</body>
</html>
}What It Formats
- HTML elements — proper indentation, block vs inline element handling
- Go expressions —
{ expr }preserved as-is (never reformatted) - Control flow —
if/else,for,switch/caseblocks - Component calls —
@component()with optional children - CSS/Script templates —
css name() { ... }andscript name() { ... } - Comments — HTML (
<!-- -->) and Go (//,/* */) - Void elements —
<br>,<input>, etc. without self-closing slash
Options
| Option | Type | Default | Description |
|---|---|---|---|
| templSortAttributes | "recommended" | "alphabetical" | false | "recommended" | Sort HTML attributes. Recommended order: id, class, name, type, for, href, src, action, method, then alphabetical. Spread attributes always last. |
| templSortTailwindClasses | boolean | true | Sort Tailwind CSS classes in class attributes using canonical order. Requires prettier-plugin-tailwindcss to be installed. |
| tailwindStylesheet | string | — | Path to Tailwind v4 CSS entry point for class sorting. |
Tailwind CSS Class Sorting
Install prettier-plugin-tailwindcss alongside this plugin:
npm install --save-dev prettier-plugin-tailwindcssClass sorting is enabled by default and will be silently skipped if the Tailwind plugin is not installed.
For Tailwind v4, point to your CSS entry file:
{
"tailwindStylesheet": "./src/app.css"
}License
MIT