[Frontend] Standardize code style using prettier

[Bobgy]

A standard https://prettier.io/ config that allows everyone format code in the same way helps improve development productivity and avoid wasted efforts during review.

Also suggested by @eterna2
/area front-end
/priority p0

UPDATE: I never considered using clang-format (used in google) for this project, because it doesn't support tsx(react) formatting and deviates a lot from existing code style.

[Bobgy]

I am planning a few steps on doing this:

1. [Frontend] Prettier config to be consistent with existing code style #2409 Make a reasonable prettier config with related documentation on how to use it. Start using it in newly written/changed code.
2. After a week's feedback, agree on the config.
3. Format all source files under frontend/src using prettier #2462 Transform the complete code base with prettier after syncing with people having open PRs.
4. [Frontend] Check format in travis CI #2463 Set up precommit hooks + CI check. (No one currently wants a precommit hook, please comment below if you want it.)
5. [Frontend] Update CONTRIBUTING.md with frontend code style info #2464 Update CONTRIBUTING doc with related information.

Note: there's an ongoing long PR for frontend/server: #2081, I will format server code after it gets merged.

[Bobgy]

My current prettier config that is mostly the same as our existing code style.

trailingComma: all
singleQuote: true
jsxSingleQuote: true

Made a PR for this config: #2409
Reference:

• integrating it with tslint: https://prettier.io/docs/en/integrating-with-linters.html#tslint
• how to ignore one line: https://prettier.io/docs/en/ignore.html

For configuration, reference: https://prettier.io/docs/en/options.html and https://prettier.io/docs/en/configuration.html

The only major difference is trailingComma: all: https://prettier.io/docs/en/options.html#trailing-commas
I'm strongly for using it, because:

• it helps make list editing only affect the lines that actually changed, no need to keep fixing commas when reordering

Another difference to discuss is print-width: https://prettier.io/docs/en/options.html#print-width
It recommends 80, but I feel like it's too aggressive.
We can consider using 100 or 120 too.

The following PRs are examples of what code will be changed after applying different configs:

• The config above: [Frontend] Prettier format example result #2408
• The config above + printWidth = 100 :[Frontend ] prettier example printwidth 100 #2420

[Bobgy]

UPDATE, discussed with @jingzhang36 and @rmgogogo. Agreed on printWidth: 100 option, because our screens are larger than before.

[Bobgy]

Only left work item is enforcing code style for src/frontend/server, will address that in a separate issue as stated in #2406 (comment)

/close

[k8s-ci-robot]

@Bobgy: Closing this issue.

In response to this:

Only left work item is enforcing code style for src/frontend/server, will address that in a separate issue as stated in #2406 (comment)

/close

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[Bobgy]

Note, also standardized src/frontend/server in #2717