Prettier + Husky + git-commit-hook + package.json on a separate folder

prettier-husky-hook.md

Problem 💥

I can't get Prettier, husky, git commit hooks working for my project, as I have my package.json in a separate folder!!!111!! WHAT TO DO?!?!!!

Example set-up:

• package.json in a separate folder (say .frontend/package.json)
• prettier installed
• husky installed
• pretty-quick installed
• and it doesn't work anyway...

Solution 🎉

So, what if I told you there is a magic solution for this!

WOW THAT'S SO CRAZY SICK! U FOR REALZ?!?!

Do the following:

1. npm install -D prettier pretty-quick husky
2. Add script to package.json:

• "scripts": {..., "prepare": "cd ../ && husky install ./frontend/.husky", ...}

3. Add husky hook to package.json:

    "husky": {
        "hooks": {
          "pre-commit": "pretty-quick --staged"
        }
    }

4. Run npm install

• a .husky-folder will be created alongside your package.json-folder
• e.g ./frontend/.husky

5. Add new file under the .husky-folder named pre-commit

• i.e ./frontend/.husky/pre-commit

6. Add the following content to enable pre-commits:

  #!/bin/sh
  . "$(dirname "$0")/_/husky.sh"
  # Notice the folder here, important
  cd ./frontend && npx lint-staged

7. Enable execution on the pre-commit-file

• chmod +x pre-commit

8. Add file .lintstagedrc on same level as your package.json
9. Add the following content to .lintstagedrc:

    { "*.{js,ts,tsx,scss,css}": ["eslint", "prettier --write"] }

10. Done ✨

You can now perform a change somewhere in e.g a tsx-file, and your changes will be prettified 😁