Output as plain text when running lint-staged through husky

[wbeeftink]

Description

When using lint-staged through a pre-commit hook with Husky, the output is shown as plain text as such:

git commit

When I run lint-staged on the command line, the output is fine:

node .\node_modules\lint-staged\bin\lint-staged -r

I'm unsure what's causing this as I've tried it with both Powershell and Git Bash. Is it because of Husky or perhaps Git? I would like to have pretty output when committing.

Steps to reproduce

My config lint-staged.config.js:

module.exports = {
  'src/**/*.ts': files => {
    const convertedFiles = files.map(file => `--files ${file}`).join(' ');
    return `ng lint smart ${convertedFiles}`
  },
  'src/**/*.scss': 'stylelint'
};

My Husky config in packages.json:

"husky": {
  "hooks": {
    "pre-commit": "lint-staged -r"
  }
}

Debug Logs

expand to view

PS C:\Users\wbeeftink\Projects\project> node .\node_modules\lint-staged\bin\lint-staged -rd
  lint-staged:bin Running `lint-staged@9.2.1` +0ms 
  lint-staged Loading config using `cosmiconfig` +0ms   lint-staged Successfully loaded config from `C:\Users\wbeeftink\Projects\project\lint-staged.config.js`: 
  lint-staged { 'src/**/*.ts': [Function: src/**/*.ts],
  lint-staged   'src/**/*.scss': 'stylelint' } +14ms  lint-staged:cfg Validating config +0msRunning lint-staged with the following config:{  'src/**/*.ts': files => {    const convertedFiles = files.map(file => `--files ${file}`).join(' ');    return `ng lint smart ${convertedFiles}`  },  'src/**/*.scss': 'stylelint'}
  lint-staged:run Running all linter scripts +0ms  lint-staged:git Running git command [ 'rev-parse', '--show-toplevel' ] +0ms   lint-staged:run Resolved git directory to be `C:\Users\wbeeftink\Projects\project` +99ms   lint-staged:git Running git command [ 'diff', '--staged', '--diff-filter=ACM', '--name-only' ] +91ms 
  lint-staged:run Loaded list of staged files in git: 
  lint-staged:run [ 'build.cake',
  lint-staged:run   'lint-staged.config.js',
  lint-staged:run   'package.json',
  lint-staged:run   'src/app/test1.scss',
  lint-staged:run   'src/app/test1.ts',
  lint-staged:run   'src/app/test2.scss',
  lint-staged:run   'src/app/test2.ts',
  lint-staged:run   'yarn.lock' ] +109ms
  lint-staged:gen-tasks Generating linter tasks +0ms
  lint-staged:gen-tasks Generated task:
  lint-staged:gen-tasks { pattern: 'src/**/*.ts',
  lint-staged:gen-tasks   commands: [Function: src/**/*.ts],
  lint-staged:gen-tasks   fileList: [ 'src\\app\\test1.ts', 'src\\app\\test2.ts' ] } +5ms     
  lint-staged:gen-tasks Generated task:
  lint-staged:gen-tasks { pattern: 'src/**/*.scss',
  lint-staged:gen-tasks   commands: 'stylelint',
  lint-staged:gen-tasks   fileList: [ 'src\\app\\test1.scss', 'src\\app\\test2.scss' ] } +1ms 
Stashing changes... [started]
  lint-staged:git Running git command [ 'status', '--porcelain' ] +126ms 
Stashing changes... [skipped] 
→ No partially staged files found...
Running tasks... [started]
Running tasks for src/**/*.ts [started]
Running tasks for src/**/*.scss [started]
  lint-staged:make-cmd-tasks Creating listr tasks for commands [Function: src/**/*.ts] +0ms 
  lint-staged:make-cmd-tasks Creating listr tasks for commands 'stylelint' +17ms
ng lint smart --files src\app\test1.ts --files src\app\test2.ts [started]
stylelint [started]
  lint-staged:task cmd: ng +0ms
  lint-staged:task args: [ 'lint',
  'smart',
  '--files',
  'src\\app\\test1.ts',
  '--files',  'src\\app\\test2.ts' ] +0ms  lint-staged:task execaOptions: { preferLocal: true, reject: false, shell: false } +1ms 
  lint-staged:task cmd: stylelint +28ms 
  lint-staged:task args: [ 'src\\app\\test1.scss', 'src\\app\\test2.scss' ] +3ms
  lint-staged:task execaOptions: { preferLocal: true, reject: false, shell: false } +0ms 
stylelint [failed] 
→
Running tasks for src/**/*.scss [failed] 
→ 
ng lint smart --files src\app\test1.ts --files src\app\test2.ts [failed] 
→  
Running tasks for src/**/*.ts [failed]
→ 
Running tasks... [failed]



✖ stylelint found some errors. Please fix them and try committing again.
 
src/app/test1.scss
3:21  ✖  Unexpected named color "red"   color-named

src/app/test2.scss
1:1  ✖  Unexpected empty source   no-empty-source



✖ ng lint smart --files src\app\test1.ts --files src\app\test2.ts found some errors. Please fix them and try committing again.    
Linting "smart"...

ERROR: C:/Users/wbeeftink/Projects/project/src/app/test1.ts:1:12 - Type declaration of 'any' loses type-safety. Consider replacing it with a more precise type.
ERROR: C:/Users/wbeeftink/Projects/project/src/app/test2.ts:1:3 - missing whitespace

Option "files" was already specified with value ["src\\app\\test1.ts"]. The new value ["src\\app\\test1.ts","src\\app\\test2.ts"] 
will override it.
Lint errors found in the listed files.

Environment

• OS: Windows 10
• Node.js: v10.15.3
• lint-staged: v9.2.1

[carlocorradini]

I have the same issue.
Has anyone found a solution?

[vollmerr]

I found this issue related to chalk not displaying colors in windows using husky typicode/husky#350 and seems to work for adding the FORCE_COLOR=1 env var such as this:

"husky": {
    "hooks": {
      "pre-commit": "cross-env FORCE_COLOR=1 lint-staged"
    }
  },

By no means the best solution, but looks to be working as a temporary fix.

[okonet]

We actually set it here https://github.com/okonet/lint-staged/blob/e879b6afbd0b922b5d5e950c52c01e95a6394b29/bin/lint-staged#L5-L10 but maybe isTTY is false on Windows? Can someone check and come up with a better fix for it?

[carlocorradini]

Checked and is set to true.

Simple Test:

Output is correct:

The problem occurs when is used with Husky.

OS: Microsoft Windows 10 Pro
Version: 10.0.18362 Build 18362

[wbeeftink]

@carlocorradini Thanks for testing this! I didn't have time to look into the suggestions myself. In the meantime I found this issue: typicode/husky#350. Here two ways are mentioned to enable colors for Husky output:

Option 1: Create file ~/.huskyrc (source):

# ~/.huskyrc
export FORCE_COLOR=1

Option 2: Add FORCE_COLORS to your package.json, like this (source):

"husky": {
  "hooks": {
    "pre-commit": "env FORCE_COLOR=1 node  ./node_modules/lint-staged/bin/lint-staged -r"
  }
}

Both options worked for me and I now have colors in the output. This is great since it makes the output more readable.

However, the output from lint-staged is still being rendered as plain, static text:

When running lint-staged directly without Husky, the text is animated and with markup:

Any ideas if this can be solved as well? From what I can tell the animations are the output of listr but I'm unsure why the issue occurs.

[TGlide]

Same issue here. When running lint-staged solo, colors run normally, but when running through husky, no colors..

[iiroj]

Hello,

we currently try to force colors in the cli here:

https://github.com/okonet/lint-staged/blob/0daae611b0637ebc6b9fac8672b842444bee3a38/bin/lint-staged.js#L5-L9

It would be helpful if somebody could debug the value of supportsColor, and supportsColor.level.toString().

Additionally, if manually setting it to 1 enables the pretty output.

[iiroj]

Looking at listr2's code here, it seems me might also have to override process.stdout.isTTY:

https://github.com/cenk1cenk2/listr2/blob/be5f6e195400f4622da386f251d259affe2e0438/src/utils/renderer.ts#L13-L15

[wbeeftink]

Looking at listr2's code here, it seems me might also have to override process.stdout.isTTY:

https://github.com/cenk1cenk2/listr2/blob/be5f6e195400f4622da386f251d259affe2e0438/src/utils/renderer.ts#L13-L15

Interesting. While doing a git commit in Powershell I get plain text and the debug values within isRendererSupported are:

process.stdout.isTTY: undefined,
renderer.nonTTY: false

When calling lint-staged directly, I get formatted output and the debug values are:

process.stdout.isTTY true
renderer.nonTTY false

If I hardcode isRendererSupported to always return true, my Powershell is spammed with listr's values. Instead of keeping the same 5-10 lines and updating them, it spams new lines continuously until the hook finishes.

[kristibyrnes]

Added this to my package.json and this worked for me-

"husky": { "hooks": { "pre-commit": "env FORCE_COLOR=1 npm run test" } }

[github-actions]

🎉 This issue has been resolved in version 12.3.7 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[webbertakken]

First: confirming that it works

Thank you for this release!

Generally this seems to do the trick for Powershell 7.2.2 on Windows.

When I run this command it works perfectly

yarn lint-staged

Breaks as part of commit-hook

When running as part of a commit-hook however it no longer seems to work.
I'm running it through a hook using the latest husky version 7.0.4.

I have tested two variants:

Variant 1: simply running it from the hook

Husky pre-commit hook prevents lint-staged from outputting any colors; except for some specific ones related to the failure; or lint-staged doesn't detect that colors can be used correctly, however you want to put it.

The commit hook .husky/pre-commit:

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

# Check changed files
yarn lint-staged

The output:

Variant 2: using FORCE_COLOR

When I add an export with FORCE_COLOR=1, lint-staged output keeps scrolling up instead of updating the lines in place. I think this is what @wbeeftink was referring to as well in their comment.

The commit hook .husky/pre-commit:

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

# Enable colors in Powershell (has scrolling issue?)
export FORCE_COLOR=1

# Check changed files
yarn lint-staged

The output (truncated to preventing spam)

Other notes

Some lines in the first variant seem to already duplicate over multiple lines, so I'm not 100% sure that it's color related.

Any tips on how to debug the issue?

[carlocorradini]

So, I don't understand if it has been solved or not.
I keep having the same problem. 😥

[tianheg]

Same problem:

[STARTED] Preparing lint-staged...
[SUCCESS] Preparing lint-staged...
[STARTED] Running tasks for staged files...
[STARTED] package.json — 3 files
[STARTED] **/*.{js,md,scss} — 1 file
[STARTED] prettier --write
[SUCCESS] prettier --write
[SUCCESS] **/*.{js,md,scss} — 1 file
[SUCCESS] package.json — 3 files
[SUCCESS] Running tasks for staged files...
[STARTED] Applying modifications from tasks...
[SUCCESS] Applying modifications from tasks...
[STARTED] Cleaning up temporary files...
[SUCCESS] Cleaning up temporary files...
[main 564ef05] test: lint-staged emoji work in konsole
 2 files changed, 3 insertions(+), 3 deletions(-)

Env:

> node --version
v16.14.2
> npm --version
8.7.0
> cat package.json

"devDependencies": {
    "husky": "^7.0.4",
    "lint-staged": "^12.3.8",
    "prettier": "2.6.2"
  },
  "prettier": {
    "$schema": "https://json.schemastore.org/prettierrc",
    "tabWidth": 2,
    "semi": false,
    "singleQuote": true,
    "trailingComma": "all",
    "endOfLine": "lf"
  },
  "lint-staged": {
    "**/*.{js,md,scss}": "prettier --write"
  },

[spencerb02]

I too have run into this same issue. It's unfortunate because the lint-staged format is pretty awesome, but triggered through Husky, it gets turned to plaintext. Forcing colors causes the output to post over and over for any update instead of updating in place.

Powershell 5 1 19041 1320
Node 16.14.2
NPM 8.7.0
husky ^7.0.4
lint-staged ^12.4.0

[kirill-martynov]

Same issue for me :(

[duncanlew]

I also have the same issue with:
Node 16.14.0
husky 7.04
lint-staged 12.4.0

[Axedyson]

Same issue here:
typicode/husky#968 (comment)

[dkl78167816]

same question

[Ethorsen]

Same issue since last major upgrade. Forcing colors will create the problem mentioned by @webbertakken. Removing export FORCE_COLOR=1 will output the plain "log style" format

[ikrishagarwal]

still happens to me. I am on the latest version of both and using PowerShell in windows terminal.

[pjg]

Latest MacOS, zsh, node 16, husky 8, lint-staged 12. Doesn't output colors when run through husky.

[yufengwang]

Same problem

[LittleHendrix]

same issue on MacOS Monterey 12.4
node: v12.22.4
npm: 8.11.0
husky: 4.3.8
lint-staged: 10.5.4

no colours, no animation, just status in plain text inside square brackets e.g. "[STARTED]", "[SUCCESS]", .etc

[iiroj]

This issue is already closed. Let's keep the discussion in #1145, or alternatively in typicode/husky#968.

To me this looks like an issue not directly caused by lint-staged but rather some other update.

[olemarius]

I'm seeing the same issue as described awebbertakken where it looks like the console output is appended instead of replaced. If you look at the loading icon in front of "# Preparing lint-staged...", every new occurence is +1 frame.

I'm on windows 11 using VS Code and Powershell terminal

"lint-staged": "^13.0.3",
"husky": "^8.0.1",

with config:

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts,vue}": ["npm run eslint"]
  } ,

[btd1337]

It same problem here:

"husky": "^8.0.1"
"lint-staged": "^13.0.3"

macOS Monterrey: 12.4
zsh: 5.8.1

The error occurs in any Terminal: iterm2, Mac terminal, etc.

[Josh-Cena]

For anyone landing here: this issue seems to be from neither lint-staged nor husky, and a pretty good workaround is already found.

[siarheiyelin]

I've managed to fix the issue by downgrading lint-staged from 13.x to 12.x

[cafecafe]

For anyone landing here: this issue seems to be from neither lint-staged nor husky, and a pretty good workaround is already found.

The issue is still present and the quoted fix is still valid.