Format frontend projects with prettier

[manuelmeister]

Fixes #2749

[carlobeltrame]

Shouldn't we also give some formatting love to the react components?

[manuelmeister]

@carlobeltrame in which form? :D
It seems to me, that they are reformatted: e.g. https://github.com/ecamp/ecamp3/pull/2769/files#diff-fddc1bfb49003552989a149f80da734466c38fa06e123fcd42d4b4c5629c3ee5

[carlobeltrame]

Ah! My phone didn't show me all changed files I think. Looks great 👍

[BacLuc]

When i run lint:check locally, i get >5000 problems.
When i run lint, then the following is the output: manuelmeister#2
But the github actions verifies the output.
Is it just me, can someone verify mine or the github action result of the formatting?

And the github actions also passes on my changes...? https://github.com/BacLuc/ecamp3/runs/6810618861?check_suite_focus=true

[manuelmeister]

This could be connected to https://prettier.io/docs/en/rationale.html#multi-line-objects and a different printWidth somehow set.

[BacLuc]

When i run lint:check locally, i get >5000 problems. When i run lint, then the following is the output: manuelmeister#2 But the github actions verifies the output. Is it just me, can someone verify mine or the github action result of the formatting?

And the github actions also passes on my changes...? https://github.com/BacLuc/ecamp3/runs/6810618861?check_suite_focus=true

I thought i understand eslint and prettier, but i don't.
If i run into problems with prettier, i will fix them

[manuelmeister]

@BacLuc does this work for you now?

[usu]

🙄 ui, many merge conflicts this will create...

I'm not sure this PR works as expected. I tried to merge into #2683, with the intention to accept all my changes in the merge conflicts and then re-run lint. Following is observed:

• After resolving merge conflicts, running npm run lint locally doesn't change anything
• Auto Format in VS Code doesn't change anything
• However, code style clearly doesn't follow this PR's code style (see for example on this line )
• running npm run lint:check locally in frontend or print folder says "no issues found"
• running docker-compose exec frontend npm run lint:check finds issues in 2 files (global.scss and variables.scss)

[manuelmeister]

Sorry for the inconvenience, I did intend for you to review before merging.
Maybe @BacLuc can help you improve the configuration for VS Code.

As for the rest, I'm not sure why the linting has no effect. It could be an installation issue. Because yesterday when I pulled develop into this, and forgot to do the linting, it correctly showed the same errors as local.