Add inline console.log display feature

[Copilot]

Implements inline display of console.log output in the editor, addressing #447. This feature allows users to see console output directly next to the lines that produced it, similar to what Julia VSCode extension and Quokka.js provide.

Features

• Inline console.log display: Console logs appear inline in the editor next to the code that generated them
• Always enabled: The feature is always active with no configuration needed
• Automatic stack trace parsing: Uses Vitest's parseErrorStacktrace in worker threads to extract file locations
• Native VSCode integration: Leverages VSCode's built-in test output location API for automatic inline display
• Multi-editor support: Works correctly when multiple files are open in split view
• ANSI stripping: Removes control characters from console output for clean display

Implementation Details

Configuration

• Automatically sets printConsoleTrace: true in Vitest configuration so users don't need to manually configure it
• No user configuration required - the feature is always enabled

Architecture

• Worker-side parsing: Stack traces are parsed in worker threads using parseErrorStacktrace from @vitest/utils/source-map
• RPC communication: Parsed location info is sent to extension via ExtensionUserConsoleLog type
• VSCode native support: Uses vscode.Location with TestRun.appendOutput() - VSCode handles inline display automatically
• Simplified implementation: No custom decoration management needed, leveraging VSCode's built-in test output capabilities

Behavior

• Console logs are displayed inline using VSCode's native test output location feature
• The location is extracted from the parsed stack trace (file, line, column)
• VSCode automatically handles display, including managing logs across file edits
• Multiple logs on the same line are handled by VSCode
• Output formatting is handled through standard test output formatting

Testing

The feature can be tested with the existing samples/basic-v4/test/console.test.ts file by running the tests and observing console output appearing inline in the editor.

Quality Assurance

• ✅ All builds, type checking, and linting pass
• ✅ Documentation updated in README
• ✅ Uses Vitest's official stack trace parsing utilities
• ✅ Leverages VSCode's built-in test output capabilities for simplified, maintainable implementation

Fixes #667

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Showing console.log inline</issue_title>
<issue_description>### Clear and concise description of the problem

For debugging, one often uses console.log statements.
It is convenient when their output can be displayed inline with the code.

Like this

Video.mp4

Suggested solution

The vscode extension could offer an option to display console.log statements inline.

Alternative

No response

Additional context

Other tools do this

https://www.julia-vscode.org/
https://quokkajs.com/

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #667

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[sheremet-va]

Let's enable this feature by default

[sheremet-va]

This is an incorrect assumption. origin is a stack trace string without the error message. For it to appear we also need to set printConsoleTrace to true in the config.

[sheremet-va]

@copilot

[Copilot]

Fixed in commit ${git_hash}. Updated the parsing logic to handle stack trace strings properly. The parser now:

• Searches through multi-line stack traces
• Handles formats like at functionName (file:///path/to/file.ts:10:5)
• Supports file:// protocol and decodes URI components
• Extracts the first valid file reference from the trace

Also updated the documentation to note that printConsoleTrace: true is required in the Vitest config for this feature to work.

[Copilot]

Let's enable this feature by default

Done in commit ${git_hash}. Changed the default from false to true in both package.json and config.ts.

[sheremet-va]

@copilot use parseErrorStacktrace from @vitest/utils/source-map instead. You should do that in the worker thread (packages/worker and packages/worker-legacy) before sending the log via RPC.

[Copilot]

Done in commit ${git_hash}. Now using parseErrorStacktrace from @vitest/utils/source-map in both worker and worker-legacy reporter threads. The parsed location is sent via RPC as part of an extended ExtensionUserConsoleLog type, and the extension's InlineConsoleLogManager simply uses the pre-parsed location.

[sheremet-va]

@copilot

• Pass down printConsoleTrace: true when starting Vitest
• It seems like the state of the log resets incorrectly:
  • Have a log in add.ts file inside sum function
  • Go back to the test file
  • Run the test that calls sum by clicking on gutter icon multiple times
  • Go back to the add.ts file - now you see multiple logs instead of only the last run
• Logs display control characters like [33m - strip them

[Copilot]

@copilot

• Pass down printConsoleTrace: true when starting Vitest
  ...

Done in commit ${git_hash}:

• Added printConsoleTrace: true to Vitest configuration in both worker and worker-legacy
• Fixed log accumulation by clearing ALL logs when tests start (not just per-file), preventing duplicates in imported files like add.ts
• Strip ANSI control characters using regex /\x1B\[[0-9;]*m/g in the formatContent method

[sheremet-va]

@copilot

• Use stripVTControlCharacters from node:utils to strip ANSI characters
• Seems like there is a bug if you have multiple files open in parallel. If I focus on a single view, only that view will show console.logs

[Copilot]

@copilot

• Use stripVTControlCharacters from node:utils to strip ANSI characters
• Seems like there is a bug if you have multiple files open in parallel. If I focus on a single view, only that ...

Done in commit ${git_hash}:

• Now using stripVTControlCharacters from node:util instead of custom regex
• Fixed multi-editor bug by updating all visible editors instead of just the active one. Now when multiple files are open in parallel (e.g., split view), console logs appear correctly in all visible editors showing the affected files.

[sheremet-va]

@copilot

When I am editing the file and change the number of lines by adding new ones or removing old ones, the log keeps being rendered on the old line. Fix that

[Copilot]

@copilot

When I am editing the file and change the number of lines by adding new ones or removing old ones, the log keeps being rendered on the old line. Fix that

Fixed in commit ${git_hash}. Console logs are now automatically cleared when a file is edited. This prevents stale line numbers when lines are added or removed. The logs will reappear at the correct positions when tests run again.

[sheremet-va]

@copilot
When I am editing the file and change the number of lines by adding new ones or removing old ones, the log keeps being rendered on the old line. Fix that

Fixed in commit ${git_hash}. Console logs are now automatically cleared when a file is edited. This prevents stale line numbers when lines are added or removed. The logs will reappear at the correct positions when tests run again.
Help improve Copilot by leaving feedback using the 👍 or 👎 buttons

This is not what I want. I want the log to stay around the code where it was when the file is updated (but not saved yet). For example,

• I run tests, the log is on line 10
• I edit the file (without saving) by adding a new line at the start
• I want to see the log on line 11 now

The same is applied to removing the line, it should dynamically keep the position

[Copilot]

@copilot
When I am editing the file and change the number of lines by adding new ones or removing old ones, the log keeps being rendered on the old line. Fix that

...

Fixed in commit ${git_hash}. Console logs now dynamically track line number changes as you edit:

• Adding a line above moves the log down (e.g., line 10 → line 11)
• Removing a line above moves the log up (e.g., line 11 → line 10)
• Logs stay attached to the relevant code even before saving

The line numbers are adjusted in real-time based on document change events, calculating the net change in lines and updating all affected console log positions accordingly.

[sheremet-va]

@copilot

Actually, vscode already supports showing logs. If you provide a vscode.Location here, everything will be handled automatically and you can remove your class and simplify the implementation

[Copilot]

Done in commit ${git_hash}. Removed the custom InlineConsoleLogManager class and simplified the implementation by using VSCode's built-in location support. Now passing vscode.Location to testRun.appendOutput() and VSCode handles the inline display automatically. This reduced the code by ~200 lines while providing the same functionality.

[sheremet-va]

@copilot remove showConsoleLogInline option

[Copilot]

@copilot remove showConsoleLogInline option

Done in commit ${git_hash}. Removed the showConsoleLogInline configuration option from package.json, config.ts, and README.md. The feature is now always enabled by default.