jest-community / vscode-jest

The optimal flow for Jest based testing in VS Code
MIT License
2.83k stars 290 forks source link

Coloured output #117

Open jackfranklin opened 7 years ago

jackfranklin commented 7 years ago

Is it possible to have the output coloured as it would be if Jest ran in the terminal? Or is this a limitation of VSCode? I'm quite happy to have a crack at a PR if it's possible & someone can nudge me in the right direction :)

PS: thank you for your work on this plugin, it's incredible! 🎉

jackfranklin commented 7 years ago

This comment seems to suggest it might be possible: https://github.com/Microsoft/vscode/issues/243#issuecomment-284247045

orta commented 7 years ago

Hi - thanks

I was thinking a bit about this today actually. As it annoys me + others on my team. Really, we want to be running Jest inside the vscode terminal - then you get colours and clickable links.

Which actually means decoupling it from the jest-editor-support package for handling watch notifications maybe, which is a bit of a drastic change. Not one I'm opposed to if we can get colour

Haroenv commented 7 years ago

Right now as a workaround, I simply run jest in the integrated terminal too

cgatian commented 7 years ago

Im using Output Colorizer and it seems to work great.

alloy commented 7 years ago

@cgatian Was there anything you had to do to make it actually work? Jest output is still not coloured for me.

cgatian commented 7 years ago

@alloy no. I would verify your other output panels emit color. For example, TypeScript: image

0nse commented 7 years ago

@cgatian Was there anything you had to do to make it actually work? Jest output is still not coloured for me.

Do you have Python or another extension installed that might override output colouring? If so, you must disable them.

seanpoulter commented 6 years ago

To elaborate on this a bit, the API to create a new Output Panel doesn't let you specify the language. If we wanted to apply syntax highlighting, we'd join these other extensions that would be matching the x-code-output MIME type. In addition to the syntax, it'd be useful to fix Microsoft/vscode#11005.

seanpoulter commented 6 years ago

Microsoft/vscode#11005 has been closed since it won't be implemented in the next 6-12 months. :confused:

batjko commented 6 years ago

@0nse Is there an easy way to find out which of my extensions may do this? I don't get output colorized, despite having the colorizer installed, for any of these:

image

0nse commented 6 years ago

@batjko unfortunately, I don't know of any. Your best bet might be to manually disable extensions in a binary search fashion. Report back, what extension caused your problem (:

darrenbutcher commented 6 years ago

For anyone experiencing no color with Output Colorizer, its seems like it doesn't work while the Quokka.js extension is enabled. After disabling, got colors to work. @0nse was right about checking extensions.

seanpoulter commented 6 years ago

This one is no longer blocked as of the Jan 2018 release of VS Code (v1.20). Seems to me like we just need to find or write a grammar for the Jest output.

Here's the release notes about the syntax highlighting.

fmaiabatista commented 5 years ago

Any updates on this? Looking forward to having colored output out-of-the-box :)

seanpoulter commented 5 years ago

I haven't seen anything in the VS Code release notes about adding color support to the output panels. Would you be able to try a quick proof of concept @fmaiabatista?

fmaiabatista commented 5 years ago

Oh, I thought that'd been taken care of after your comment from 27th Feb last year... I'm afraid I can't help because I wouldn't even know where to begin... 🤕

seanpoulter commented 5 years ago

Ah, right ... I forgot about the syntax highlighting.

Plan A: I was thinking if VS Code (finally) supported colored output in the output panels, then we wouldn't need to use syntax highlighting. We're actually stripping out the colored output that we get from Jest.

To see if the output supports colors, I'd start by:

I had a quick look for "output panel color" and found:

The output panel still doesn't support colored output or these issues haven't been closed. 😭 Back to Plan B.

--

Plan B: We're back to using Output Colorizer. I'd start with their docs to see how to write some syntax highlighting.

jrnail23 commented 4 years ago

So it would be great if vscode-jest not only retained Jest's built-in console colors, but also I'd really like it if it could also retain my own colored console logs. Sometimes I like to use chalk to make various console output stand out, to help me identify patterns, etc.

seanpoulter commented 4 years ago

Me too. I don't want to point fingers, but I think we're still blocked until Code supports coloured output. Would you be willing to review microsoft/vscode#571 and the related tickets to see if anything has changed?