finos/a11y-theme-builder#876: adding support for prettier

[aaronreed708]

Took code that @ravjot07 originally put in to make prettier work, so he should get credit for this! I'm just pushing it through.

[netlify]

✅ Deploy Preview for glistening-gecko-6b417a ready!

Name	Link
🔨 Latest commit	2df33d0
🔍 Latest deploy log	https://app.netlify.com/sites/glistening-gecko-6b417a/deploys/668efb3f303b6a0008016cd3
😎 Deploy Preview	https://deploy-preview-948--glistening-gecko-6b417a.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[kburk1997]

Question - will a precommit hook be implemented to run prettier on changed files prior to committing? Or should that be a separate issue?

I've worked on frontend projects with precommit hooks and prettier before, and it makes reviewing PRs much smoother in my experience since we can focus on code content and be reassured that formatting was automatically applied :)

[evangk6]

Holding off on review until Aaron is back to answer the above question.

[aaronreed708]

I'm fine with a precommit hook

[aaronreed708]

@kburk1997 I was looking at pre-commit hooks in Git. Particularly how to get them to work with a GitHub repo: https://stackoverflow.com/questions/427207/can-git-hook-scripts-be-managed-along-with-the-repository.

What approaches did your other projects use w.r.t. pre-commit hooks? I think putting our hooks into a folder in the repo and than asking developers to update their git config to point to them would be the best way. Of course, can't force people to do that. And it requires git version >= 2.9, which I know I personally don't have on either of my machines, so guessing a great many people also don't have this version. Nothing insurmountable, but another hurdle.

[aaronreed708]

This works for me when put in a11y-theme-builder/.git/hooks/pre-commit and made executable. It came from: https://prettier.io/docs/en/precommit.html#option-4-shell-script.

#!/bin/sh
# Gather the names of files that have been staged (by "git add") and were the result of 
#  code being added, created, merged or renamed
FILES=$(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g')
# if there are no files then exit
[ -z "$FILES" ] && exit 0

# Prettify all selected files
echo "$FILES" | xargs ./code/node_modules/.bin/prettier --ignore-unknown --write

# Add back the modified/prettified files to staging
echo "$FILES" | xargs git add

exit 0

[aaronreed708]

Per discussion in yesterday's Theme Builder call, I opened a separate issue for creating a pre-commit hook for running prettier and linting -> #960

[evangk6]

The shear volume of changes are due to the reformatting of the entire code base with prettier - looks good to me!