Pre-install Prettier and ESLint VSCode extensions

[trumbitta]

Description

In an effort to further simplify #8995, this only adds pre-installed and pre-activated ESLint & Prettier extensions for VSCode with "format on save".

It's a cherry-pick from #8895 so it's expected to vanish from that PR once this gets merged.

Related Issue(s)

Re #3841
This is a prerequisite to ensure the work on the linting issues can proceed with sane defaults.

How to test

For Prettier: open a TS file, and see if the code you write gets formatted on save.
For ESLint: open a TS file, produce a linting error, and see if VSCode marks it with a squiggly yellow line.

Release Notes

- [devx]: Added ESLint and Prettier to the auto-installed VSCode extensions
- [devx]: Activated "format on save" for TypeScript and JavaScript

Documentation

[trumbitta]

/cc @jankeromnes @filiptronicek @iQQBot

[trumbitta]

ping @jankeromnes @filiptronicek 😊

[iQQBot]

Thanks for your contribution @trumbitta

It's looks good to me, but I will ping @gitpod-io/engineering-webapp have a look

[iQQBot]

/werft run no-preview

👍 started the job as gitpod-build-prettier-eslint-fork.0

[iQQBot]

Unfortunately we have some components besides the dashboard and server that are written in typescript, but may not follow the specification, which will result in a lot of changes once saved

This would put a lot of pressure on the review, so maybe we need to format all items or exclude them before merging this PR

[trumbitta]

Unfortunately we have some components besides the dashboard and server that are written in typescript, but may not follow the specification, which will result in a lot of changes once saved

This would put a lot of pressure on the review, so maybe we need to format all items or exclude them before merging this PR

Thanks for reviving this PR :)

I had anticipated this the first time and the second time I worked on the general "unified code style" problem.

Then @easyCZ took over a part of it and also added a pre-commit hook which, I guess, already addresses your concerns if finally applied to everything?

This PR is a fundamental pre-requisite for #3841 🙏

[laushinka]

Oh my, I'm sorry this was missed this long. Taking a look!

[laushinka]

I tried editing something in a .tsx file and the code didn't get prettified on save. @iQQBot it worked for you?

[trumbitta]

I tried editing something in a .tsx file and the code didn't get prettified on save. @iQQBot it worked for you?

🤔 could it be that the file had syntax errors? Prettier only activates when the file is completely sane 🤔

[trumbitta]

Screen.Recording.2022-04-28.at.14.54.43.mov

It's working for me!
Did the auto-install of the Prettier extension work for you? I know I also have it installed globally for my VSCode account so if something's amiss with the installation it's entirely possible I wouldn't notice.

[laushinka]

It's working for me! Did the auto-install of the Prettier extension work for you? I know I also have it installed globally for my VSCode account so if something's amiss with the installation it's entirely possible I wouldn't notice.

Yup! I also only changed some formatting and spacing. Hmm..

[laushinka]

I have been having weird issues with my editor(s), so let me nudge someone else to test it.

[laushinka]

Thank you @andrew-farries for helping testing it and thank you @trumbitta for the contribution! It looks like there are only conflicts that need to be resolved, and then it's good to go.

[trumbitta]

Thank you @laushinka and @andrew-farries 🙏

I just rebased from main and fixed the conflicts 🤞

[laushinka]

/werft run no-preview

👍 started the job as gitpod-build-prettier-eslint-fork.1
(with .werft/ from main)