Adjust formatter configuration/tool #104

oliverpool commented 2023年02月17日 23:24:06 +01:00

A prettier config with pre-commit hook has been added in #80, with the default configuration.

Some concerns regarding the formatting were raised in the following PRs: #98 #102.

• Sometimes classnames are on one line, sometimes one class per line
• Standalone tags get a trailing slash added
• Some tags get split with identation <a[NEWLINE+INDENT]>some text</a[NEWLINE+INDENT]>

Since the introduction of the pre-commit hooks was positively received, I think that it is fair to state that having a preferred way to format the code is a nice thing to have.

However how this code should be formatted wasn't discussed at all.

The goal of this issue is to find a consensus regarding the formatting tool.

I see two possibilities:

• tweak the config of prettier (within its limitation, for instance https://github.com/prettier/prettier/issues/5246)
• or switch to another tool

---

Since I am personally happy with any configuration (as long as there is one :), my only must-haves for this consensus are:

• it should be able to format the most filetypes present in this repo (.ts, .js. .astro, .md)
• work as a pre-commit hook (probably possible for any tool)

@fsologureng @crystal @Ryuno-Ki since you raised concerns, what are your have "must-haves" or wishes regarding this issue? (btw, thank you for raising those concerns. If at least 3 people have spoken up about this issue it means that it is worth speaking about!)

A prettier config with pre-commit hook has been added in #80, with the default configuration. Some concerns regarding the formatting were raised in the following PRs: #98 #102. - Sometimes classnames are on one line, sometimes one class per line - Standalone tags get a trailing slash added - Some tags get split with identation `<a[NEWLINE+INDENT]>some text</a[NEWLINE+INDENT]>` Since the introduction of the pre-commit hooks was positively received, I think that it is fair to state that having a preferred way to format the code is a nice thing to have. However how this code should be formatted wasn't discussed at all. The goal of this issue is to find a consensus regarding the formatting tool. I see two possibilities: - tweak the config of prettier (within its limitation, for instance https://github.com/prettier/prettier/issues/5246) - or switch to another tool --- Since I am personally happy with any configuration (as long as there is one :), my only must-haves for this consensus are: - it should be able to format the most filetypes present in this repo (.ts, .js. .astro, .md) - work as a pre-commit hook (probably possible for any tool) @fsologureng @crystal @Ryuno-Ki since you raised concerns, what are your have "must-haves" or wishes regarding this issue? (btw, thank you for raising those concerns. If at least 3 people have spoken up about this issue it means that it is worth speaking about!)

Ryuno-Ki commented 2023年02月19日 15:50:59 +01:00

Thank you @oliverpool for opening this issue.

Sometimes classnames are on one line, sometimes one class per line

I think, this is an attempt to keep the maximum character length below a certain treshold to avoid horizontal scrolling.

Standalone tags get a trailing slash added

I'm a fan of this (because I learned HTML when XHTML was still a popular choice).

Some tags get split with identation <a[NEWLINE+INDENT]>some text</a[NEWLINE+INDENT]>

I've seen some projects using a variant of this (mainly Angular) to allow for easier scanning of attributes. That being said, I have a different personal opinion on this. I'm willing to accept what the majority is willing to choose.

When it comes to configuring Prettier, https://prettier.io/docs/en/options.html should be kept in mind (as in: there are limits on what we can tweak).

Thank you @oliverpool for opening this issue. > Sometimes classnames are on one line, sometimes one class per line I think, this is an attempt to keep the maximum character length below a certain treshold to avoid horizontal scrolling. > Standalone tags get a trailing slash added I'm a fan of this (because I learned HTML when XHTML was still a popular choice). > Some tags get split with identation <a[NEWLINE+INDENT]>some text</a[NEWLINE+INDENT]> I've seen some projects using a variant of this (mainly Angular) to allow for easier scanning of attributes. That being said, I have a different personal opinion on this. I'm willing to accept what the majority is willing to choose. When it comes to configuring Prettier, https://prettier.io/docs/en/options.html should be kept in mind (as in: there are limits on what we can tweak).

fsologureng commented 2023年02月21日 18:37:29 +01:00

Hi, thanks for this @oliverpool.

I'm against the added trailing slash because even though I'm a fan of XHTML, that feature is out of spec for plain HTML, which leads to false positives in the validator (at least the W3C one).

I would like to see prose wrap changed to preserve; I think we are all comfortable with the wrap done by our preferred editor. Furthermore, any edition which extends a line of a long paragraph further the wrapping limit should trig a wrap of all the subsequent non-changed lines, which is an undesirable change.

Regarding single attribute per line, I think it is a good measure to track narrow changes to certain attributes.

Hi, thanks for this @oliverpool. I'm against the added trailing slash because even though I'm a fan of XHTML, that feature is out of spec for plain HTML, which leads to false positives in the validator (at least the W3C one). I would like to see [prose wrap](https://prettier.io/docs/en/options.html#prose-wrap) changed to `preserve`; I think we are all comfortable with the wrap done by our preferred editor. Furthermore, any edition which extends a line of a long paragraph further the wrapping limit should trig a wrap of all the subsequent non-changed lines, which is an undesirable change. Regarding [single attribute per line](https://prettier.io/docs/en/options.html#single-attribute-per-line), I think it is a good measure to track narrow changes to certain attributes.