chore: Formatting for web-frontend (DEV-3939)

[seakayone]

• Use prettier for formatting to web-frontend
• Add yarn fmt to just fmt

Proposal: Use prettier as in used in the add, include a plugin which supports Svelte.

@mpro7 is looking into alternatives currently, maybe there is something better?

[linear]

DEV-3939 Add formatting

[mpro7]

Prettier is most common and widely used formatter, which we most probably will use too, however it is not about installing and running it only, but also about turning on or off some of the options. In this PR HTML looks less readable than before ans there were added trailing slashes to the tags where they should't be. So I would vote for closing this PR. I will open one when will be ready with something to propose.

[seakayone]

Prettier is most common and widely used formatter, which we most probably will use too, however it is not about installing and running it only, but also about turning on or off some of the options. In this PR HTML looks less readable than before ans there were added trailing slashes to the tags where they should't be. So I would vote for closing this PR. I will open one when will be ready with something to propose.

I do not see a reason of why we should not collaborate.
I have no special preference on the prettier config, I have simply taken the default config.

As for the HTML I actually like the way it is formatted with the attributes on their own line. This feels familiar to how it was in the Svelte tutorial.

Feel free to checkout this branch and update the config to your liking.

[mpro7]

"Unfortunately" all goes around Prettier, which I personally dislike. There is ESLINT which could be installed as plugin too, but under the hood it also uses Prettier. Rome. which was working well with Svelte is not maintained anymore and its successor Biome doesn't fully support Svelte. This means we kind od need to stick with Prettier, which IMO needs to be adjusted in terms of setting.
At the end it's JUST formatting :)

[seakayone]

"Unfortunately" all goes around Prettier, which I personally dislike. There is ESLINT which could be installed as plugin too, but under the hood it also uses Prettier. Rome. which was working well with Svelte is not maintained anymore and its successor Biome doesn't fully support Svelte. This means we kind od need to stick with Prettier, which IMO needs to be adjusted in terms of setting. At the end it's JUST formatting :)

I appreciate your feedback and the thorough research you have done, thank you.

Despite your personal "disliked" I do not see a strong argument against using prettier as the other alternatives seem worse and prettier -at least to me - feels like the def-facto standard for JS projects. Let's merge this as a baseline formatter and then make incremental improvements on its configuration.

You are right, ESLint is often used in conjunction with prettier. AFAIU ESLint is a linter which statically analyses the source code but is not a formatter. The combination of both is also the setup in dsp-das. Do you think we should followup on this?