Add prettier

[jamesdools]

Describe what the PR does

👋 I wanted to have a quick dig into the code, and saw that you need a linter I think! 😄

Based on our previous chats about eslint etc, it sounds like Prettier (https://prettier.io/) may be your style haha.

What is Prettier?
- An opinionated code formatter
- Supports many languages
- Integrates with most editors
- Has few options

Why?
- You press save and code is formatted
- No need to discuss style in code review
- Saves you time and energy

State whether the PR is ready for review or whether it needs extra work

Let me know if there are any rules you really don't agree with - they can be changed in the .prettierrc- refer to https://prettier.io/docs/en/options.html.

[pietrop]

Awesome, thanks!

in .prettierignore you want to add the dist folder for bundle and the .out folder for storybook to exclude those from prettier.

**/node_modules
*.json
+.out/
+dist/

[pietrop]

We can maybe add something in the README under "Development Environment"

---

This repo uses prettier for linting. If you are using visual code you can add the Prettier - Code formatter extension, and configure visual code to do things like format on save.

You can also run the linting via npm scripts

npm run lint

and there's also a pre-commit hook that runs it too.

[pietrop]

re eslint rules, as you know I am not super opinionated on these things but Not a fan of this

  const defaultShowSpeakersPreference =
    typeof props.showSpeakers === 'boolean' ? props.showSpeakers : true;
  const defaultShowTimecodesPreference =
    typeof props.showTimecodes === 'boolean' ? props.showTimecodes : true;

would rather this

  const defaultShowSpeakersPreference = typeof props.showSpeakers === 'boolean' ? props.showSpeakers : true;
  const defaultShowTimecodesPreference = typeof props.showTimecodes === 'boolean' ? props.showTimecodes : true;

seems like it's just changing .prettierrc?

{
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "es5",
-  "printWidth": 100
+  "printWidth": 150
}

[pietrop]

a few more JSX Brackets and Bracket Spacing to add some consistency (mostly for myself, I tend to switch between one way or another or doing it without particular reason)

{
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "es5",
-  "printWidth": 100,
+  "printWidth": 150,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false
}