Amphtml: Adopt `prettier` for code formatting

[rsimha]

https://github.com/prettier/prettier

[rsimha]

/cc @kristoferbaxter @cramforce

[kristoferbaxter]

Request: Look at removing all the ESLint rules regarding formatting at the same time.

[rsimha]

@kristoferbaxter Yes, the goal is to replace all eslint style rules, while retaining all the coding guideline rules.

[cvializ]

Hooray for consistency! Has there been / will there be a design review for implementing mandatory source formatting? Will this format the whole file at once, or just lines/blocks that were changed?

[rsimha]

Design review is a good idea. I'll schedule one after I experiment with prettier and come up with a list of common workflows that will result from adopting it.

[ampprojectbot]

This issue hasn't been updated in awhile. @rsimha Do you have any updates?

[rsimha]

At long last, I experimented with using prettier for AMP. Since we use eslint for code formatting and for preventing known anti-patterns through custom rules in build-system/eslint-rules, my approach was to use eslint-plugin-prettier as part of our global .eslintrc, thereby switching to prettier for code formatting while continuing to use eslint for other checks.

Unfortunately, it looks like I've hit a blocking issue. AMP code requires quoted object keys to prevent aggressive minification by closure compiler (#10094), which resulted in the amphtml-internal/dict-string-keys rule. It doesn't look like there's a way to prevent prettier from stripping away these keys (https://github.com/prettier/prettier/issues/4327), and it's unlikely that this bug will get fixed in the near future. The only workaround seems to be to use square brackets around keys to prevent them from being optimized away, and that doesn't seem like an acceptable solution.

@kristoferbaxter @cramforce Since you're more familiar with prettier than I am, are you aware of any other workarounds to this? Or are we at an impasse?

Full list of errors as of today: https://travis-ci.org/ampproject/amphtml/jobs/500592963#L1933

[cramforce]

I asked https://twitter.com/cramforce/status/1101607929638051840

[rsimha]

This is done.

With a cool 138,754 line diff @AMPhtml migrated to @prettiercode https://t.co/nT1YCTN4rC

Huge thanks to the Prettier team and especially @Vjeux for helping us along the way, making changes and accepting our PRs.

— Malte Ubl (@cramforce) May 16, 2019