Add a pre-commit linting step

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"
}
  1. Run npx mrm@2 lint-staged as described here

Hope this is helpful!

3 Likes

Very helpful! I :heart: 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.

2 Likes

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!

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.

1 Like