Definitive cross-platform lint-staged config (explained)

package.json

{  
  // 1. Use these exact dependencies
  "devDependencies": {
    "husky": "=8.0.3",
    "lint-staged": "=13.2.1"
  }

  // 2. Make sure it installs when people install dependencies
  "scripts": {
    "prepare": "husky install"
  }

  // 3. Configure checks to run simultaneously (only 1 that writes)
  "lint-staged": {
    "*.@(ts|tsx)": "bash -c 'tsc --skipLibCheck --noEmit'", // the `bash -c` part is to make sure tsc picks up tsconfig.json (See: https://github.com/okonet/lint-staged/issues/825#issuecomment-674575655)
    "*.@(ts|tsx|js|jsx)": "eslint --max-warnings 0", // if you want to fail on warnings too, otherwise simply `eslint`
    "*.@(ts|tsx|js|jsx|json|jsonc|json5|md|mdx|yaml|yml)": "prettier --write" // automatically fix formatting errors
  }
}

pre-commit.sh

# .husky/pre-commit

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# If tty is available, apply fix from https://github.com/typicode/husky/issues/968#issuecomment-1176848345
if sh -c ": >/dev/tty" >/dev/null 2>/dev/null; then exec >/dev/tty 2>&1; fi

# Heavy checks should only be done on staged files
yarn lint-staged

Added the if sh -c ": >/dev/tty" >/dev/null 2>/dev/null; part so that the fix is not applied when no tty is available. This makes is so that you can still make commits from your IDE for example.

In the git log of WebStorm on Windows it looks like this:

Whereas from a tty (like the latest PowerShell on Windows below) you'll get the proper animated version:

This combines the fix (for no tty) from https://stackoverflow.com/a/69088164/3593896 with the fix (for broken cli animations) from typicode/husky#968 (comment)

Amazing!

Added single quotes to "bash -c 'tsc --skipLibCheck --noEmit'" because otherwise tsc flags won't be fired.

Well first of all, thank you so much! 🙏🙏🙏
You finally got me moving in some direction after hours of search.

For some reason, Webstorm was running the lint staged like it was a tty on my machine. It mad the colors and listr stuff to keep messing my logs.
I resolved it by tweaking this a little bit further, forcing lint-staged to use verbose renderer, by setting NODE_ENV="test" or TERM="dumb"
So for me I added an else statement

if sh -c ": >/dev/tty" >/dev/null 2>/dev/null; then exec >/dev/tty 2>&1; else export NODE_ENV="test"; fi

I found it in here

Note: I'm not sure if using those flags changes other parts in lint-staged behavior, but at least I know it forces IDE and other tools to log plain text. I wish lint-staged would enable that as a feature without this workaround.

After testing this further, the above solution works, but Github Desktop also messes things around.
Here is another check needs that could be added (for mega ultra 99% working solution)

# If tty is available, apply fix from https://github.com/typicode/husky/issues/968#issuecomment-1176848345
if sh -c ": >/dev/tty" >/dev/null 2>/dev/null; then exec >/dev/tty 2>&1; else export TERM="dumb"; fi

# bug on Windows/Github Desktop: add `.cmd` extension fixes it. more info: https://github.com/desktop/desktop/issues/12562#issuecomment-1153237769
case `uname` in
  *CYGWIN*|*MINGW*|*MSYS*)
    npx.cmd lint-staged
  ;;
  *)
    npx lint-staged
  ;;
esac

Thanks for reporting back your findings @shayl29. I'll have a go with it in the coming weeks and see if it's worth updating the original above. The fix looks useful.

Do you know why Webstorm was running the pre-commit hook using a tty?

My Terminal settings are I think default apart from using the more modern Powershell, which I think should be used by everyone instead of using git bash or Mingw, so that we can move forward as a community.

Does not work on WSL with Laravel Sail

error.mp4