Feat: improve the report readability by indenting sections

[mathieucaroff]

When I run knip on my codebase, it runs for a one or two minutes and produces a report of more than 900 lines. This is why I've opted to save the command output to a file: yarn knip | tee knip3.txt | less. Once this is done though, it remains hard to distinguish the sections of the report. Therefore it would be nice if in the report, the errors listed in each section could be indented by e.g. two spaces. This would enable VSCode users to collapse the report sections.

Thanks!

[webpro]

Do you mean that the output in the VS Code terminal can be collapsed if indented, or are you copying the contents into the VS Code editor manually? I guess the latter, just checking to be sure about expectations here.

[mathieucaroff]

What I do is that I redirect knip's output to a file: npx knip > knip-output.txt and then open that file in VSCode. Copy-pasting the output of the command to VSCode could be complicated when there are so many lines of output that the terminal I'm using contains only the end of the output.

Here's an example of what I'd like the output to be:

Unused files (3)
  src/devtools/index.ts
  src/middleware/index.ts
  src/utils/index.ts
Unused devDependencies (2)
  @types/jest  package.json
  husky        package.json
Unused exports (5)
  default      unknown  config/preprocessor.js:3:17
  connect      unknown  src/devtools/devtoolsMiddleware.ts:145:29
  useStore     unknown  src/react/index.ts:7:37
  useSelector  unknown  src/react/index.ts:7:47
  useAction    unknown  src/react/index.ts:7:60
Unused exported types (11)
  ReduxAction              interface  src/devtools/devtoolsMiddleware.ts:13:18
  MessageState             interface  src/devtools/devtoolsMiddleware.ts:18:18
  Message                  interface  src/devtools/devtoolsMiddleware.ts:27:18
  NextAction               interface  src/devtools/devtoolsMiddleware.ts:3:18
  DevToolsStore            type       src/devtools/devtoolsMiddleware.ts:41:13
  DevTools                 interface  src/devtools/devtoolsMiddleware.ts:47:18
  Action                   interface  src/devtools/devtoolsMiddleware.ts:8:18
  ActionsObject            type       src/types/index.ts:12:13
  Actions                  type       src/types/index.ts:13:13
  BoundActions             type       src/types/index.ts:14:13
  FuncTypeWithoutFirstArg  type       src/types/index.ts:7:13
Unused exported class members (4)
  getChildContext    default  src/preact/components/Provider.tsx:7:3
  getChildContext    default  src/react/components/Provider.tsx:12:3
  childContextTypes  default  src/react/components/Provider.tsx:9:10
  contextTypes       Connect  src/react/components/connect.tsx:9:10

Making lines distinguishable would also simplify parsing the command output to perform post-processing. Ideally, we would have a JSON format output, but that would be another feature request which would also be very closes to the out-of-scope issue #41.

[webpro]

Thanks for the feedback!

A JSON reporter already exists: https://knip.dev/features/reporters/

It's also possible to create a custom reporter to print exactly what you want.

Maybe I could add an --indent argument or something, I'll think about it.

[webpro]

Gave it another thought and decided not to work on it myself now.

I would be happy to discuss/review a PR that introduces this. Knip supports custom reporters as well.

By the way, for you or future me: there's also https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#grouping-log-lines for expandable groups to do something similar in GitHub Actions.

Thanks for the input!