Introduce prettier and split linting and code styling

[abiyasa]

Introduce prettier for code styling formatting. This is not just introducing prettier to our dependency and build process but more than that!

Splitting code stye formatting (prettier) with linting for code quality rules (eslint)

The idea that we should not care and waste our time discussing about code styling and delegate/automate that matters to prettier. This will free us more time and energy to discuss more important stuff. See https://www.morling.dev/blog/the-code-review-pyramid/ about this common phenomenon on code review

• This means that our eslint rules should focus on code quality and contains rules to prevent bugs (e.g no unused vars, no implivit globals, prefer const, ...).
• Any code styling rules (e.g trailing coma, space, quotes, white space) should be handled by prettier.
• For motivation on splitting linting and code styling, see https://prettier.io/docs/en/comparison.html

Preferable to use the default prettier config as-is

Again, this is to delegate anything related to code styling to prettier. As soon as we add prettier config, even if it's just a small config, it might start discussions about 2-vs-4 spaces, single vs double quotes, ...

People will then focus and invested on discussions around mundane aspects like code style formatting, whereas more important aspects (does the code change do what it is supposed to do, is it performant, is it backwards-compatible for existing API, do we write good tests, and many others) tend to get less attention. See https://www.morling.dev/blog/the-code-review-pyramid/

Drop eslint-config-ebay

eslint-config-ebay is based on airbnb eslint rules which is a mix of code styling (and very opinionated about it) and bug-prevention rules. Unfortunately the eBay rule is not maintained since 2019, some rules might outdated, not in-synch with AirBnB anymore, and does not consider for the latest ES6+ (e.g ES2022) and TypeScript.

• Would drop eslint-config-ebay and stick with recommended eslint rules (e.g eslint:recommended, @typescript-eslint/eslint-recommended, react/recommended) and add more rules to help us catching bugs (e.g react-hooks/recommended)

Others

• Include prettier as-part of husky or lint-staged