[Prettier Plugin] How to make it work for Twig files?

[gremo]

I'm not using Twig prettier plugins. Is there a way o make this plugin work for Twig files alone?

[Pandfuldell1949]

Hello , @gremo I read you question and figure it out what is exactly your issue so just want to tell you that , As of my last knowledge update in September 2021, there might not be a dedicated Twig prettier plugin available to format Twig files directly using the Prettier tool. Prettier is primarily designed for formatting JavaScript, TypeScript, CSS, HTML, and other languages, but not specifically for Twig.

However, there are potential workarounds you can explore to achieve a similar result:

VSCode Extension with Prettier Support: If you are using Visual Studio Code (VSCode) as your code editor, there are extensions that integrate Prettier and support Twig files indirectly. For example, the "Prettier - Code formatter" extension can format multiple file types, including HTML and CSS, which are often used in conjunction with Twig templates. Myjdfaccount

VSCode Extension for Twig Formatting: Some VSCode extensions are specifically designed for formatting Twig files. You can search for "Twig" or "Twig formatter" extensions in the VSCode Marketplace to find one that suits your needs.

Integrate Prettier with Custom Scripts: You can create custom scripts or build systems that invoke Prettier's CLI (Command Line Interface) to format Twig files. This approach allows you to use Prettier for formatting in conjunction with other tools or your project's build process.

Explore Other Tools: While Prettier is a widely used code formatter, there may be other dedicated Twig formatting tools or plugins available that can help you achieve the desired result.

Keep in mind that the availability of tools and plugins may have changed since my last update. I recommend searching online or checking relevant developer communities and forums for any new updates, plugins, or extensions related to formatting Twig files with Prettier or other formatting tools.

I hope my suggestion help you out Thank You .
Best Regards ,

[gremo]

Thanks, sorry for not being clear in my question.

I already use Visual Studio Code with Prettier extension and it works well with JavaScript, TypeScript and all other files it supports natively.

The problem is with Twig files and Tailwind plugin:

• Without a plugin for Twig, twig files aren't formatted by Prettier
• With a plugin like prettier-plugin-twig-melod, this plugin won't work as stated in the documentation

So the question remain: hot make it work with Twig files?

[alessandro-newzoo]

LOL If one wanted a reply from ChatGPT, they would go to ChatGPT, not GitHub.
Please don't pollute GH issues with this nonsense.

[gremo]

@alessandro-newzoo shame on me being fooled by that answer!

[cdx111]

Yes, you can configure the Prettier plugin to work specifically for Twig files by setting up a file-specific configuration. Here's how you can do it:

Install the Prettier plugin for your code editor if you haven't already. For example, if you're using Visual Studio Code, install the "Prettier - Code formatter" extension.

In your project's root directory, create a file named .prettierrc (or .prettierrc.json, .prettierrc.yaml, etc.) to define your Prettier configuration.

In the .prettierrc file, specify the file-specific configuration for Twig files. For example, to configure Twig files to use a tab width of 4 spaces, the configuration could be:

Copy
{
"overrides": [
{
"files": "*.twig",
"options": {
"tabWidth": 4
}
}
]
}
This configuration will only be applied to files with the .twig extension.

Save the .prettierrc file.

Now, when you format a Twig file using the Prettier plugin, it will use the specific configuration defined in the .prettierrc file for Twig files. Other file types will continue to use the default or global Prettier configuration.

[gremo]

@cdx111 So there is no need to install a specific plugin like melody, to make prettier work with twig files (and, in turn, install the Tailwind plugin itself)?

[alessandro-newzoo]

The only way to make this work with Twig files is to use Prettier to format your .twig files, and Prettier sucks for Twig files.

This is a pain in the butt because you can only use Prettier for twig if you:

• add this plugin to your prettier config: https://github.com/trivago/prettier-plugin-twig-melody - this plugin hasn't been updated in years so it won't work with Prettier 3.x, hence:
• you have to stick to v 0.4.1 of the Tailwind Prettier plugin forever because anything above that requires Prettier 3.x.
• like explained above use Prettier 2.x

For some odd reason they decided to release this plugin for Prettier, assuming that every coder out there uses it as their formatter :/

I've opened a discussion here yesterday to ask if they could possibly release a more universal approach, like a node package, to only sort the classes, so that people are free to use the formatter they want: #11830

Ma secondo me nemmeno lo leggeranno 😁

[gremo]

But following the @cdx111 answer, it seems that you can simply format twig files with prettier adding the overrides section. No need to configure any plugin. I didn't have tested it yet. But plain Prettier + simple twig formatting + Tailwind plugin would be great!

By the way, I've started to love Prettier. I used to configure eslint + stylelint for code formatting but they are right - these tools should only report errors and warnings about code behaviour, not styling stuff. In fact, they are going to remove all styling rules. Prettier is opinionated, I know, but you save a lot of time and get consistent formatting in no time.

Anche secondo me ti ignoreranno 😄

[alessandro-newzoo]

Oh I don't mind Prettier in general but it just sucks with Twig, that's what I meant..
My current stack is Twig + TailwindCSS and believe me when I say I've spent whole days trying to find a good combo that works.

@cdx111's solution won't work because Prettier can't parse template tags like {{ var }} without an extra parser, it will just not know how to interpret those tags because they're not HTML, and it will error out on format.

And that's where https://github.com/trivago/prettier-plugin-twig-melody comes into play (and so do the problems explained in my previous comment).

Here's what your prettier config should look like:

// ...
	overrides: [
		{
			files: '*.twig',
			options: {
				parser: 'melody',
			},
		},
	],
	plugins: [
		require('prettier-plugin-twig-melody'),
		require('prettier-plugin-tailwindcss'), // this needs to always be last
	],
// ...

[gremo]

OK @alessandro-newzoo thank you, I won't give it a try then. If I understand correcnt, the only solution would be try to PR melody and update the plugin to work with Prettier 3.

Even if the melody plugin isn't compatible officially: https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins

[alessandro-newzoo]

yes correct :/

The melody plugin was in the compatible list up until 0.4.1, I'm guessing they removed it from the list because it doesn't work with Prettier 3, though it's just a guess.

If you check the most popular melody forks (which are very unpopular anyway), there are some forks out there, though none of them seem to support Prettier 3 yet.

The only one with decent activity seems to be the Supersoniks one but they disabled the Issues panel so there's no way to interact with them and ask.

I honestly don't know what to do, I have no idea why it's being so hard to work with Twig given how popular and relatively modern it is...

Feel free to add me on Discord if you want, so we can share our findings should we ever find some good new option out there: error.500 is my handle on DC

[gremo]

Ok then, i've added you on Discord (username is polmonino)

[idflood]

Twig support would be great. In the meantime I've found that using the @shopify/prettier-plugin-liquid works relatively well. The syntax is very similar to twig, and formatting is not perfect but already good.

"prettier": {
    "plugins": [
      "@shopify/prettier-plugin-liquid",
      "prettier-plugin-tailwindcss"
    ],
    "overrides": [
      {
        "files": "*.twig",
        "options": {
          "parser": "liquid-html"
        }
      }
    ]
  },

Maybe using this module as a base to create a new prettier plugin for twig would be a good idea.

[alessandro-newzoo]

Thanks, I just tried it and it works surprisingly well for basic stuff, but it's unfortunately far from ideal :(

Here's a table to compare Liquid and Twig:

Feature	Twig	Liquid	Notes
Variable Output	{{ variable }}	{{ variable }}	Similar syntax; auto-escaping is on by default in Twig.
Filters	{{ variable|filter }}	{{ variable | filter }}	Both use pipes, but available filters and their behavior can differ.
If Statements	{% if condition %}...{% endif %}	{% if condition %}...{% endif %}	Syntax is similar, but Twig allows more complex expressions. The content of IF statements will not be indented.
For Loops	{% for item in items %}...{% endfor %}	{% for item in items %}...{% endfor %}	Similar syntax; Twig offers for else for handling empty sequences.
Inheritance	{% extends 'base.html.twig' %}	Not directly supported	Twig uses {% extends %} and {% block %} for template inheritance. Liquid uses includes and layouts. The content of Blocks will not be indented.
Comments	{# comment #}	{% comment %} comment {% endcomment %}	Significantly different comment syntax.
Complex Logic	Supported	Simpler logic	Twig supports more complex expressions and operations within templates.
Safety/Escaping	Auto-escaping enabled by default	Manual escaping	Twig variables are auto-escaped for safety. Liquid requires explicit escaping.
Custom Extensions	Custom functions, filters via PHP	Limited customization	Twig allows adding custom features via PHP. Customization in Liquid is platform-dependent.
Include with Vars	{% include 'filename.twig' with {vars} %}	{% include 'filename', vars %} or {% render %}	Twig directly supports passing variables with with. Liquid's method varies; render is Shopify-specific. Vars inside an include with block will not be indented

Though it is indeed an amazing starting point for creating a new prettier plugin for twig like you said.

Tough choice:

• prettier-plugin-twig-melody, with working formatting but stuck on Prettier 2.x forever, script and style tags breaking and other minor things, or
• @shopify/prettier-plugin-liquid, with half-baked formatting, but Prettier 3.x and inline JS/CSS being formatted correctly

I honestly have no idea why Twig support in Prettier is so lacking, I thought Twig was more popular than this, but at this point I wish I didn't choose it for our website as it's causing me a lot of stress.

[alessandro-newzoo]

we're one step closer 🎉

This amazing person forked Trivago's prettier-plugin-twig-melody and made it work with Prettier 3.x: https://github.com/zackad/prettier-plugin-twig-melody

The only remaining issue is that the TailwindCSS plugin for Prettier does not support it, so I've opened an issue here tailwindlabs/prettier-plugin-tailwindcss#254, and they're willing to add support, but the author of the fork needs to publish it as a separate package (more info inside the issue).

I've now opened an issue there too hoping they can publish that package, you're very welcome to go star the fork and upvote the issues I've created ❤️
zackad/prettier-plugin-twig-melody#11

[gremo]

@alessandro-newzoo that's a pretty good news!

One question: does it work with utilities like html_classes and cva?