adds lint-staged + husky, integrates prettier + eslint

[Nick-Gabe]

What this PR does

It installs and makes the setup of husky and lint-staged, to run eslint and prettier in staged files (files that will be commited). Because running any of them directly would run for all the files and that doesn't scale well.

lint-staged shows an interface before finishing your commit, running through the files and checking if any of them is a valid file for linting, and if it is, it will check it and try to fix its problems, if possible. If the problems can't be fixed automatically, you'll receive an error and will not be able to commit until you fix it.

As some say, "fail fast", and what is faster than the developer commiting the changes?

It also integrates eslint and prettier using the eslint-prettier-plugin, this way they don't get overlapping rules and prevent "breaking" your file due to warnings or errors.

Media Sample

2023-03-21.21-18-21.mp4

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
phived	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 24, 2023 at 0:49AM (UTC)

[nidib]

Really nice DX feature. Just a couple of questions, but since I've got nothing to add, lgtm.

• Vercel's check did not pass
• Would you mind writing down to this PR's description how to use this husky thing? Like npm install then what? if there's anything extra to setup
• I see that every time lint-stage is executed, it runs prettier with change permission and also eslint. How is that being executed? Locally to this project's dependencies? I for instance don't have prettier globally (if that's the case) and don't pretend to install it globally as well. How will that work?

My point with this last question is: I think we should not have a DX feature that depends on global installs (If and only if this PR is doing that)

[Nick-Gabe]

@nidib

1. I also found it strange that vercel deployment didn't pass, but I can't verify the reason this happened, I think only @LukeberryPi can check the logs.

• Tried to lint files to check if maybe eslint errors were the issue but still didn't solved the preview failure. 🤔

3. Yes, it's just that, you run npm install and that's it, now when you commit anything it will run the script shown in the video
4. Nope, it's not global, I don't have any of them installed globally aswell. It runs just like npx, from local packages.

[LukeberryPi]

this is what vercel build showed

[Nick-Gabe]

@LukeberryPi
Apparently vite does have an error since 2021, that it expects esbuild to be installed globally sometimes, however vercel, netlify and other platforms don't install it automatically. So as described in this solution, we can install it as a development dependency and it will already work for Vercel to recognize and execute the build properly.

[LukeberryPi]

thank you for your patience. looks great, merging.