Use Prettier to Format Code

[marvinchin]

Right now, we are manually formatting code to comply with the linting rules. Having to do this can be somewhat annoying to developers, and can also result it some inconsistencies across the codebase (e.g. where/when to break to a new line).

Instead, we can use a code formatter such as Prettier to automatically format the code for us. This would avoid the overhead of formatting our own code and makes the codebase look more consistent.

[yamgent]

I recall eslint already providing some options to automate the fixing of eslint code style violations.

[marvinchin]

Yes it does, but outside of fixing linting errors, Prettier provides better support for formatting code consistently (e.g. there are many ways to break a line exceeding 80 lines, Prettier enforces a consistent way of breaking them).

Not sure if the rest of the team sees much value in this, but it was a tool I used in other projects that I found really helpful so I brought it up 🙂

[Chng-Zhi-Xuan]

Seems like a good developer QOL enhancement.

I'm pretty tired of using ./node_modules/.bin/eslint . --fix as well :P

[damithc]

It can be used individually without having to enforce on the entire project first?

[marvinchin]

Formatting files individually as we work on them might cause large, unnecessary diffs (since prettier will format the entire file). I'm concerned that it would make the PR process more difficult.

[damithc]

Formatting files individually as we work on them might cause large, unnecessary diffs (since prettier will format the entire file). I'm concerned that it would make the PR process more difficult.

I see. I have no objections. Will leave the decision to senior devs :-)

[yamgent]

I am open to giving this a try. Open a trial PR with Prettier and we can see how it goes.

Also a concern would be whether we can override the styles dictated by Prettier when necessary. For example, with regards to breaking a line exceeding 80 lines, sometimes it may enforce a style that may not be ideal in terms of readability. I would like to disable the enforcement for that particular line in such a situation.

[marvinchin]

Sure, I'll do it tonight 🙂
Do we intend to adhere to the current eslint rules? Because Prettier's formatting rules may differ from some of our existing rules (e.g. the operator-linebreak and array-bracket-newline rules). There are certain ways around this, but it is a bit of a workaround and may not play nice with all editor plugins.

Regardless, I will open a PR with the Prettier formatting and see what everyone thinks about it!

[yamgent]

Do we intend to adhere to the current eslint rules?

Our current eslint rules must be followed.

[marvinchin]

Hey guys, Ive made the PR (#758) that demonstrates how the code formatted by Prettier would look like. As we discussed earlier, I've removed formatting-related eslint rules for the purpose of this demonstration.

Would appreciate if you guys could take a look at it and see if the formatting style Prettier uses suits the project.

There are also other ways that we can configure Prettier, so if there are any other options you guys want me to look at, do let me know as well!

[ang-zeyu]

Closing per discussion in #758