Adds stylelint, precommit linting steps

[kyleramirez]

Summary

This includes work described in #8.

Testing Notes

1. Pull down this branch and run yarn to install all dependencies
2. Make changes that you would expect to be auto-corrected in a linter in any .tsx file.
   1. Example: change double quotes to single quotes and remove some semi-colons
3. Run git add -A, yarn run precommit. Verify that the file was run on the linter and was auto-corrected
4. Make changes that you would expect to generate an error in a linter in any .tsx file.
   1. Example: Export an object literal from a .tsx file
5. Attempt to commit the code with git add -A and git commit
6. Verify the commit is aborted due to the linting steps and errors from lint-staged
7. Create a .scss file and write some generic CSS attributes.
8. Run git add -A, yarn run precommit. Verify that the file was run on the linter and was auto-corrected for proper CSS attribute order

Caveats / Concerns

1. Stylelint was configured to not allow CSS attributes that arent supported by the browser config. Currently, the browser config is set to latest Chrome version. This means basically any CSS is supported. We may want to adjust this setting if we want to support more browsers officially

[noi5e]

@kyleramirez Thanks for this, this is a huge help, and thanks for the testing walkthrough notes too.

What I Did

1. fetched the branch
2. git checkout
3. yarn to install dependencies

---

prettier ✅

• Before: Changed import { Outlet } from "react-router-dom"; to single quotes ('react-router-dom')
• After: git commit runs prettier and changes the quotes back to double ones!
• Outcome: Works as expected! 👍🏽

---

recess-order ✅

• Before:
  • Create a style.scss with "out-of-order" properties, and import in a random React component.
  • (Note for other devs: This was confusing me and it took me a minute to grok this, but "out-of-order" doesn't actually mean strictly alphabetical, but has to do with the priorities described here)
• After: git commit runs the plugin and reorders the CSS properties!
• Outcome: Works as expected! 👍🏽

---

eslint ✅

• Before:
  • I was having a bit of trouble verifying this at first. I did an experiment with reassigning const variables, but yarn precommit passed it.
  • Just now, I tried with a different example:

  • class A {}
    A = 0;

• After: git commit catches the errors in my second attempt!
• Outcome: Works as expected! 👍🏽 I'm chalking the first one up to (my) user error.

---

Unless I'm missing something, I think this is pretty good to go. Will merge this soon.

I do have one question before then @kyleramirez:

I can't tell from package.json if the pre-commit hook is also linting TypeScript with tsc. If not, would that be a good thing to throw into this PR, or another small one?

[kyleramirez]

I can't tell from package.json if the pre-commit hook is also linting TypeScript with tsc. If not, would that be a good thing to throw into this PR, or another small one?

@noi5e , the TypeScript linting is indeed supported with this part of the package json:

"*.{ts,tsx}": [
  "yarn run lint-command --fix",
  "yarn run prettier --write"
]

It will call lint-command on each changed file automatically:

eslint --ext ts,tsx --report-unused-disable-directives --max-warnings 0

[noi5e]

All right, sounds good, thanks @kyleramirez! Merging now.