vscode: Integrations w/ Prettier, Emmet, etc.

[alehechka]

Overview

I just recently found this project and really like the concept of being able to create and define components in a manner that generates Go code and can be packaged as a single binary.

I have one project that uses the default Go templating structure with heavy usage of tailwind for styling and htmx for interactivity. The problem I'm running into and would like to propose as a new feature of the templ ecosystem is plugin support for things such as Prettier/Tailwind/Emmet.

The .templ file extension is not supported by these tools and I have not been able to find a way to finagle them to work as I would like. For formatting, the templ CLI already has a formatter included, so I wonder if it would be possible to build a Prettier plugin with it and have prettier handle formatting the .templ files. This would also make it so other prettier settings/plugins can be used in tandem.

For tailwind and emmet, the .templ file extension isn't supported natively and from what I can tell, VS Code has a hard time attributing an unknown language to use these tools. With the default Go templates I'm able to build them within html files and thus get the support needed natively. It would be amazing if these tools could also work within .templ so we can continue to write our templates "blazingly fast" with IntelliSense.

If this is something the project maintainers are interested in but won't have enough bandwidth to work on, let me know and I can help contribute.

[a-h]

That's interesting! My goal was to have a standard format, just like Go has a standard format with go fmt.

If that can be achieved with a prettier configuration, I'd definitely consider ditching the way that templ fmt does it, and using an external tool.

A few people have made changes to templ in main (will come out in the next release) to formatting, including formatting the Go code bits using go fmt, so I think the next release will be good. I'm just doing some final testing.

I note that prettier is written in JavaScript which I think would require Node.js to be installed, so so I might prefer a Go, Rust, or C etc. tool for the task, which may also be faster. I guess it would also have to recreate the rules of go fmt which could be time consuingn.

Is the VS Code extension not working for you? I'm wondering what you're missing. I use Neovim day to day, so I might simply not know what your expectations are of how the intellisense would work. Some examples, with screenshots or gifs could be useful.

[a-mesin]

Just stumbled upon this aswell while trying to use the tailwindcss lsp inside a .templ file in Neovim. Unfortunately just adding the file type ".templ" to the lsp config of tailwindcss doesn't help. I am not sure yet if this needs to be addressed in the tailwindcss lsp server itself.

[jonerer]

FWIW i think the built in formatter is definitely good enough (and getting better each release) and much faster than prettier. And has no external dependencies.

But getting Emmet working, and getting tailwind intellisense working would be great. Now there's a lot of typing that could be automated. For emmet, i don't think it's part of the LSP, just to configure vscode to activate emmet for the html parts of.templ files.

For tailwind, well it wants to know what class names have been used, for minification of the generated css. So it might need some connection to the data structures in templ.

[alehechka]

Following up with some more findings after my initial post after reading some of the comments.

Format on Save

I was able to get formatting on save to work in VSCode by adding the following to the settings.json. This makes it so the current VSCode extension can be used to format the code pretty easily.

{
    "editor.formatOnSave": true,
    "[templ]": {
        "editor.defaultFormatter": "a-h.templ"
    },
{

Prettier Plugin

As for the Prettier plugin discussion; I mentioned that I'm using tailwind and with that, I enjoy using the tailwind-prettier plugin that auto-sorts the tailwind classes. This is the main reason for wanting a templ prettier plugin so you can combine it with other native prettier configs and other plugins for a cohesive format on save. However, outside of specific use cases like this one, I think the VSCode extension formatting as outlined above is enough.

Tailwind IntelliSense

For tailwind, after some more experimenting, I was able to get the official TailwindCSS VSCode extension configured to add IntelliSense within .templ files by adding a mapping for it to the html language. So I think all is well there. The settings.json for example:

{
    "tailwindCSS.includeLanguages": {
        "templ": "html"
    }
}

Emmet Abbreviations

I did find that the Emmet abbreviations do seem to work when configured in settings.json as an included language as follows:

{
    "emmet.includeLanguages": {
        "templ": "html"
     },
}

HTML Shortcomings in LSP

However, the above is for Emmet abbreviations specifically. This does not cover the IntelliSense for HTML (element names/attributes/auto-closing tags). It's possible to configure VSCode to associate .templ files with the HTML language, but this completely overrides the templ VSCode extension syntax highlighting. So the answer here might be to add HTML IntelliSense to the templ LSP. I'm guessing that would be a pretty large undertaking though...

[a-mesin]

Thank you @alehechka. With that information I could also fix the issue I had with tailwindcss in neovim. Just in case someone needs it following the config you need to set for lsp:

require("lspconfig").tailwindcss.setup({
    filetypes = {
        'templ',
        'html' -- include any other filetypes where you need tailwindcss
    },
    init_options = {
        userLanguages = {
            templ = "html"
        }
    }
})

Maybe some of these information could be included somewhere in the docs/guide?

[zbindenren]

Thank you @alehechka. With that information I could also fix the issue I had with tailwindcss in neovim. Just in case someone needs it following the config you need to set for lsp:

require("lspconfig").tailwindcss.setup({

    filetypes = {

        'templ',

        'html' -- include any other filetypes where you need tailwindcss

    },

    init_options = {

        userLanguages = {

            templ = "html"

        }

    }

})

Maybe some of these information could be included somewhere in the docs/guide?

Why don't you create a Pull Request?

[a-mesin]

Thank you @alehechka. With that information I could also fix the issue I had with tailwindcss in neovim. Just in case someone needs it following the config you need to set for lsp:

require("lspconfig").tailwindcss.setup({

    filetypes = {

        'templ',

        'html' -- include any other filetypes where you need tailwindcss

    },

    init_options = {

        userLanguages = {

            templ = "html"

        }

    }

})

Maybe some of these information could be included somewhere in the docs/guide?

Why don't you create a Pull Request?

I can surely create one, just questioned if it makes sense to include it

[cshuman]

I rely on the automatic class sorting in tailwind quite a bit. I would be interested in seeing how to make this work with templ.

[drshapeless]

I rely on the automatic class sorting in tailwind quite a bit. I would be interested in seeing how to make this work with templ.

I found a cli tool call rustywind. And I pipe the formatted string into rustywind.

cat hello.templ | templ fmt | rustywind --stdin

I add the hook to saving file in Emacs, and it kind of works like the prettier plugin. However, the rustywind order is slightly different than the prettier taliwind order.

[kynrai]

I rely on the automatic class sorting in tailwind quite a bit. I would be interested in seeing how to make this work with templ.

I have played around with vs code and prettier settings a bit try and get this to work with templ, no luck yet but would be willing to work on something

[kynrai]

I rely on the automatic class sorting in tailwind quite a bit. I would be interested in seeing how to make this work with templ.

I have played around with vs code and prettier settings a bit try and get this to work with templ, no luck yet but would be willing to work on something

Had a little think about it.
I propose something like, using the existing prettier I stead of replicating the sort order. Wrap this up as a code action in the existing templ lap.
That way only people who need it will use it instead of including it as part of fmt.
Vscode allows code actions on save so the existing templ vscode plugin can be updated with tailwind or more generic prettier support.

Might be able to try make a PR after work

[Lord-Leonard]

I would die for this feature! Spent the last hour researching and fiddeling arround with vscode but sadly, I wasn't able to get class sorting to work :(
I would assume rewriting the templ formatter in JS just to get the prettier-tailwind plugin running is a little unnecessary? Wouldn't it be possible to expand the templ formatter to do the sorting?

I also would be willing to dedicate some time to this :)

[alehechka]

I've been getting by without the prettier-tailwind class sorting, but I do miss the sorted classes a lot.

Additionally, the LSP seems to only support the <div> tag with no attributes for HTML intellisense. Whereas the normal HTML intellisense includes all available elements along with all possible standard attributes.

Would love to have both of these features made available, but haven't had a ton of time available to dig in to help figure out a solution.

Is there any recommended path to take in implementing either of the above mentioned features? I wonder if there's a way to tap into the HTML LSP to cover those parts of templ functions or even the JS LSP for script functions. (Have yet to use the CSS equivalent since I use tailwind, but I imagine it has the same problem). If not, it would probably just be a slog of tedium to add them to the templ LSP.

[irsyadpage]

@alehechka You can try the Tailwind Raw Reorder extension for class sorting.

[alehechka]

@alehechka You can try the Tailwind Raw Reorder extension for class sorting.

@irsyadpage, gave this a quick try and this is a sweet find!

Gonna have to play with it a bit more though. I've been manually adding newlines in my class strings to make it more readable and this seems to remove those. However, enabling line wrapping might be an easy enough fix for this qualm.

I've also been experimenting with templ's class expressions to provide an array of strings which can be formatted across multiple lines and including conditional logic, but the built-in regex doesn't seem to trigger on that syntax. It's really sweet that the extension gives so much flexibility with the regex matching, so I'll give it a swing to see if I can get something working for class expressions.

[alehechka]

Going to close this as most of my concerns have been addressed and the only remaining one seems to have a good conversation over in #498.

[scallyt]

Néhány további megállapítást az első bejegyzésem után, néhány megjegyzés elolvasása után.

Formázza a mentést

Sikerült a formázást mentéskor a VSCode-ban működni, ha hozzáadtam a következőt a settings.json fájlhoz. Ez lehetővé teszi, hogy a jelenlegi VSCode kiterjesztéssel könnyen formázható legyen a kód.

{
    "editor.formatOnSave": true,
    "[templ]": {
        "editor.defaultFormatter": "a-h.templ"
    },
{

Szebb Plugin

Ami a Prettier plugin vitát illeti; Említettem, hogy a tailwindot használom, és ezzel együtt élvezem a hátszél-szebb beépülő modul használatát, amely automatikusan rendezi a hátszél osztályokat. Ez a fő oka annak, hogy templszebb beépülő modult akarunk, hogy más, szebb natív konfigurációkkal és egyéb bővítményekkel kombinálhassuk, hogy összefüggő formátumot kapjunk mentéskor. Azonban az olyan speciális használati eseteken kívül, mint ez, úgy gondolom, hogy a VSCode kiterjesztés fentebb vázolt formázása elegendő.

Tailwind IntelliSense

A tailwind esetében némi további kísérletezés után sikerült beállítani a hivatalos TailwindCSS VSCode kiterjesztést úgy, hogy hozzáadja az IntelliSense-t a fájlokhoz, .templehhez hozzáadtam egy hozzárendelést a nyelvhez html. Szóval szerintem ott minden rendben van. A settings.json például:

{
    "tailwindCSS.includeLanguages": {
        "templ": "html"
    }
}

Emmet rövidítések

Azt tapasztaltam, hogy az Emmet-rövidítések működni látszanak, ha a settings.json fájlban a következő nyelvként van beállítva:

{
    "emmet.includeLanguages": {
        "templ": "html"
     },
}

HTML hiányosságok az LSP-ben

A fentiek azonban kifejezetten az Emmet rövidítésekre vonatkoznak. Ez nem vonatkozik az IntelliSense for HTML-re (elemnevek/attribútumok/automatikusan bezáró címkék). A VSCode konfigurálható úgy, hogy .templa fájlokat a HTML nyelvhez társítsa, de ez teljesen felülírja a templ VSCode kiterjesztés szintaxis kiemelését. A válasz tehát az lehet, hogy hozzáadjuk a HTML IntelliSense-t a templ LSP-hez. Bár szerintem ez elég nagy vállalkozás lenne...

I added these lines for better experimenc:

"auto-close-tag.activationOnLanguage": [
    "xml",
    "php",
    "blade",
    "ejs",
    "jinja",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "plaintext",
    "markdown",
    "vue",
    "liquid",
    "erb",
    "lang-cfml",
    "cfml",
    "templ",
    "HTML (Eex)"
  ],
  "auto-rename-tag.activationOnLanguage": [
    "html",
    "xml",
    "php",
    "javascript",
    "templ"
  ],