Add a pre-commit linting step

[Isaac]

I recently added a pre-commit hook to a Redwood project to lint my staged changes before committing them. I thought others might find this functionality useful, so I wanted to share the steps I took to set it up:

1. Add the following configuration to the package.json in your project’s root directory:

"lint-staged": {
  "(web|api)/src/**": "yarn rw lint --fix"
}

2. Run npx mrm@2 lint-staged as described here

Hope this is helpful!

[thedavid]

Very helpful! I posts like this — we’ve internally talked a lot about creating a new “How To” section where anyone could share and find snippets. It’ll happen and this is a good prompt.

Thank you @Isaac Please keep 'em coming.

[dthyresson]

@Isaac

I recently added a pre-commit hook to a Redwood project to lint my staged changes before committing them

Great idea! I often/usually run tests and lint when committing (or before) my framework changes but hadn’t thought to do that in an app as well. Might just start doing that!

[Isaac]

As I continued to work on this project, I noticed one issue with my command: It attempts to lint all staged files, not just JavaScript files. I fixed this issue by changing the glob pattern:

"lint-staged": {
  "(web|api)/src/**/*.js": "yarn rw lint --fix"
}

You can tweak the command further if you’re using TypeScript.

[theoradicella]

Have you tried this on windows? It works well on mac OS but my fellow devs with windows have an error and they enter an infinite loop when the husky pre commit runs…

[Isaac]

Interesting. I haven’t tried on Windows, but if your teammates find a solution, I’d love to hear it!

[theoradicella]

[13.0.0] excessive output when invoked through pre-commit script