DSM-168: Prettier setup, CI step and frontend format

[wtomaszewska]

Ticket DSM-168

Overview

This PR adds the Prettier code formatter to the repository, includes it in a CI task, and formats the entire frontend app (app/s3browser and app/javascript/entrypoints directories).

Prettier config

Prettier configuration is as follows:

{
  "trailingComma": "all", // default; adds a trailing comma to multi-line arrays, function parameters and calls
  "tabWidth": 2, // default
  "useTabs": false, // default
  "semi": true, // default; adds a semicolon at the end of every statement.
  "singleQuote": true, // use single quotes, jsx/tsx keeps double quotes to maintain HTML-like formatting 
  "printWidth": 100 // explained below
}

Some of these are Prettier defaults, but they were kept explicit for clarity, as we're testing the use of Prettier in our apps.

Print Width

Print width is probably the most discussed setting. Prettier docs recommend a width of 80; however, the team wanted to increase the width to prevent breaking up smaller pieces of code. Since printWidth is treated by Prettier as a rough length of the line, not max length, a limit too high causes Prettier to merge lines that would more naturally be broken up.

CI check

A Prettier check was added to an existing CI rake task. This is a check-only step (similar to how we use Rubocop in CI) and does not perform any actual formatting. Ideally, every developer should configure their code editor to format on save. We can also explore pre-commit hooks, though they can discourage frequent commits, which is worth avoiding.

Local Prettier settings

The following VSCode settings configure Prettier as the default formatter for .ts, .tsx, and .js files.

"[typescriptreact]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
},
"[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
},
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
},
"editor.formatOnSave": true,

[goldsmithb]

Looks pretty! ✨ ✨