Prettier/ESLint formatting before commits

[perber]

Hey @Hugo-Galley,

maybe you would also like to take a look at following issue.
LeafWiki uses Prettier & ESLint, and I keep forgetting to run npm run format before committing. This usually results in an extra “chore: format code” commit, which isn’t ideal.

We could add pre-commit hooks, but I still want to keep the setup straightforward for contributors.
Do you maybe have another idea?

[Hugo-Galley]

Hey @perber, I also think that pre-commit hooks would be the best solution, because as you mentioned, it’s not great to have a chore commit every time.
We could create a CONTRIBUTING.md file to explain how to set up the pre-commit hooks.
Since there aren’t many steps required, it would provide a simple guide for anyone who wants to contribute, while also helping us keep the code linting clean.

[perber]

Hey @Hugo-Galley,

sounds good to me. It would be nice if you could do that.
Can you prepare such a document and maybe implement a first draft of pre-commit hooks.

Thanks!

[Hugo-Galley]

Hey @perber, I have a question. Have you ever used pre-commit on your machine?
If so, I would like to know how you did it.
Because on my side I tried with husky. But by following the documentation, I can’t get the pre-commit to work.
So I’m wondering if you’ve already done it on your machine and, consequently, if you would know what it could be due to?
Thanks you

[perber]

Hey @Hugo-Galley,

thanks for looking into this!

I’ve used pre-commit hooks before, but not with Husky.
I think I still have a working configuration in another repository that we could reuse here, but I won’t be able to check it before tomorrow.

Hopefully that’s fine for you.

By the way, have you ever worked with devbox?
Not for this issue - it's for something else and more of a future topic - but it might be interesting for us long-term.
Just curious if you know any similar tools.

[Hugo-Galley]

Hey @perber, yes no problem, it's not urgent, but I would be interested to know the configuration you used.
I saw that we can specify it in the package.json in the form of a script prepare:

"scripts" : {
    "prepare": "my-hook"
}

So that it activates the hook during the npm install. This allows it to work transparently for the user.

---

Regarding devbox, no I don't know it. What is it about?

[perber]

Hey @Hugo-Galley,

I haven't found it. Not sure were I have used it in the past.
devbox lets you define the tools a project needs and creates a small isolated shell with those tools. This can make it easier for contributors, because everyone uses the same environment.

[perber]

I used this https://github.com/pre-commit/pre-commit in the past. I try to get husky up and running for testing.

[perber]

Hey @Hugo-Galley,

husky is now running. It has to run in the root directory otherwise it will not work.
I just added a working example.

I think the precommit hook should only do 2 things.

1. It should fail on format issues -> I don't think that we should format it here.
2. It should fail on linting issues.

Let me know if the setup is working for you.
You need to run npm run prepare from the ui/leafwiki-ui directory.

I think you can continue to working here:
#418 - You need to checkout the branch.

[Hugo-Galley]

Hello @perber, sorry for the delay in my response, I was quite busy this week. I still had some time to test it, and despite all my attempts, I can't get it to work on my machine. Maybe it's something related to macOS, idk. Yet I had already used pre-commit with Python. Still, everything you wrote seems consistent. Given that my environment doesn’t seem stable with regard to pre-commit hooks, I’d rather give this task back to you, so we can keep something we’re sure works. Sorry.

[perber]

Hello @Hugo-Galley,

no worries. I really appreciate that you are taking the time to work on LeafWiki.
I will take care of the issue.