Add ts files to Prettier formatting

[RodriSanchez1]

[zkarmi]

Hello @RodriSanchez1 , I'm happy to take this. This would be my first open source contribution, so thank you for the opportunity, if available.

I've locally updated package.json to include TS files in the lint-staged pre-commit. When running lint-staged after this update, it fails:

The version of Prettier being used (1.15.3) does not support optional chaining, which became available in Prettier v1.19 (which added TS 3.7 support -- https://prettier.io/blog/2019/11/09/1.19.0.html). I tested with bumping to Prettier @2.0.0 and the commit works thereafter. The latest Prettier is v3.5.3, which we can also upgrade to. It does require Node 14.18.0 or later, if that's of concern.

Lastly, we can remove git add from the the lint-staged pre-commit because it's unnecessary as of v10 and triggers a warning (seen in the above screenshot).

[RodriSanchez1]

Hi @zkarmi ! Welcome to the Cboard project!

That's awesome! Thanks for that explanation. I think the better is to bump to the latest Prettier version. Please double check if there is some breaking changes between the actual and the latest versions. We dont want unexpected behaviour hehe.

Remove the git add if is not necessary!

I will assign the issue to you. Thanks for your contribution

[zkarmi]

@RodriSanchez1 Can you help me understand what breaking issues we're looking for here? My understanding is that the pre-commit will only lint staged files, so the remainder of the repo should stay unaffected by this change until individual files are updated.

I believe this Prettier config should handle keeping a number of the Prettier options as their original defaults from 1.15.3, if that makes things easier in case of PRs with large numbers of files. However it won't address any newer options that didn't exist then, such as quoteProps:

{
  "printWidth": 80,
  "singleQuote": false,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "auto",
  "jsxSingleQuote": false,
  "proseWrap": "preserve",
  "jsxBracketSameLine": false
}

Based on the "Breaking Changes" from the Prettier docs for versions 2.0.0 and 3.0.0 the relevant ones appear to be:

• trailingComma now defaults to "all", used to be "none".
• arrowParens now defaults to "always", used to be "avoid"

[tomivm]

Thanks @zkarmi !