Git pre-push hook to lint --fix the project

[andretchen0]

Description

As a developer using TresJS ...

Problem

I forget to lint --fix before pushing. Others do too. This leads to messier commit histories, noisier diffs, and wasted time.

Suggested solution

Add a client-side pre-push git hook to lint --fix the project and abort the push if errors exist.

By default, the hook would run lint --fix during a push, before any objects have been transferred.

If there are no linter errors after running lint --fix, it would:

• continue the push

If there are unfixable-by-the-linter errors, it would:

• abort the push
• report the errors (or filenames with errors) and instruct the user to fix them
• give the user instructions for bypassing the linter step and pushing despite errors

Advantages

• Reduce the number of PRs that fail the CI lint step
• Reduce the amount of diff "noise" due to chore(lint): fix linter errors
• Reduce mental load when pushing – no need to remember to lint

Disadvantages

• Some new contributors might be turned away. E.g. maybe the linter fails and they can't figure out the next step.
• If linter errors make it into main, everyone's git push based on the branch will initially fail.
• pnpm lint --fix takes a while to run.

Alternative

Do nothing. Keep the project as-is.

Additional context

The project runs a linter as a CI step and fails unlinted PRs already.

Validations

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[alvarosabu]

Sounds good, I'm planning to refactor @tresjs/eslint-config to extend https://github.com/antfu/eslint-config flat config and using ESLint Stylistic. I did it with my personal eslint config last week to test it and it works fine.

[alvarosabu]

Here is the task Tresjs/configs#4

[damienmontastier]

Hey @alvarosabu. Wouldn't using ESLint Vue or extending it be more viable for Vue's "good practices"?

[alvarosabu]

Hi @damienmontastier Antfu's config extends the eslint vue rules with some opinionated overrides (which I agree) https://github.com/antfu/eslint-config/blob/main/src/configs/vue.ts

You can check the tres eslint config here https://github.com/Tresjs/eslint-config

[andretchen0]

Hey @alvarosabu !

• I've got a working solution. It uses the husky plugin. Is that ok with you?
• Is this something we want to eventually add to other projects in the ecosystem? If so, I'll start with Cientos as it's where I'm working right now.

[alvarosabu]

Hi, @andretchen0 sounds good, so the pre-commit of husky will lint fix then?

[andretchen0]

Hi, @andretchen0 sounds good, so the pre-commit of husky will lint fix then?

Yeah.

Husky is a plugin that makes git hook configuration a bit more straightforward.

The usual git commit, push, etc. commands won't change. They'll trigger a git hook configured by husky.

[andretchen0]

Made a PR on Cientos:

https://github.com/Tresjs/cientos/compare/chore/git-pre-push-lint?expand=1

[andretchen0]

Closing here on TresJS as there's now a PR on Cientos. Continuing the discussion there.