The Output Views
The output-view editor tab and output-sidebar sidebar are separate destinations that share the same read-only webview page. They are more performant than the editor-based REPL window. To see a feature comparison of all output destinations, see Output Destinations Feature Comparison.
The output views are two, performant, custom web views which can be configured as Output Destinations. They largely share features (and implementation), the main difference being their placement in the VS Code UI.
output-viewis an editor tab, which can be placed anywhere an editor can be placed.output-sidebaris a sidebar/panel view, which can be placed in the sidebars, or in the Panel view container.
Show the Output Views#
Run Calva: Show/Open the REPL output view for the editor tab or Calva: Show/Open the REPL output sidebar for the sidebar.
Font Size and Scaling#
The output views follow the editor font family (editor.fontFamily) and editor font size (editor.fontSize).
You can adjust the scale of the font size in the output views relative to the editor font size using the setting calva.outputViews.fontSizeScale (default 1.0, range 0.5 to 1.5).
You can also adjust the font size in-session, across both views using commands:
- Calva: Increase Output View Font Size
- Calva: Decrease Output View Font Size
- Calva: Reset Output View Font Size
The sidebar view has Zoom Out and Zoom In title bar buttons for quick adjustments.
Wrap Evaluated Code and Results#
Word wrapping for evaluated code and results in the output views can be configured via the calva.outputViews.wordWrap setting. It accepts:
"follow-editor"(default) – follows VS Code'seditor.wordWrapsetting."on"– always wraps output in the output views."off"– disables word wrapping in the output views.
There is also a command for toggling word wrap in-session across both views: Calva: Toggle REPL Output Word Wrap. This in-session toggle is not persisted. The sidebar view has a title bar button for issuing the command.
Images#
When an evaluation result contains an image data URL, image URL, or image file path as a complete string value, the output views show the image as a thumbnail.
To copy an image, hover your cursor over its thumbnail (or tab to it). A "Copy image" button will appear in the top right corner of the thumbnail. Click it to copy the image to your clipboard, as a PNG.
How the output views show images can be configured via the calva.outputViewImageDisplay setting. It accepts:
"images"(default) – data URLs and local files are rendered as images. Remote URLs stay as text, with no network request."raw"– no images are rendered."images-including-remote-urls"– Images are rendered for data URLs, local files, and remote URLs.
The command: Calva: Cycle Output View Image Display cycles in-session between "images" and "raw" across both views, if issued with no argument. Remote loading ("images-including-remote-urls") is only reached through the setting or by passing that mode as an argument to the command.
The output window, output file and terminal always show the raw text.
Errors and Stacktraces#
When an evaluation, a file load, or a test throws, the output views show the error folded. Unfold it to see the stacktrace. You can show all frames, only your project's frames, or a filtered set, where you choose to hide Clojure, Java, REPL, tooling, and duplicate frames. The view start with showing a trace filtered from Tooling and Duplicates.
Click a frame to open its file at the line linked. This works for Java frames too. If a library's Java sources aren't on your machine, Calva downloads them first (this happens once per library).
To paste an error somewhere, hover it and click its copy button. It copies the error with the frames your filter shows, so to copy the whole stacktrace, unfold the error and choose All frames first.
Clear Output#
Use the commands Calva: Clear Output View and Calva: Clear Output Sidebar to clear the respective view. The sidebar view also has a title clear button.
Search/Find#
The find widget (cmd/ctrl+f) is only available in the editor tab. Because (vscode#173643).
Copy Code Snippets#
To copy code or printed output in the output views, hover your cursor over the code snippet or output you want to copy. A "copy" button will appear in its top right corner. Click it to copy the text to your clipboard.
Theming#
highlight.js is used for syntax highlighting of code blocks. The theming of other output is controlled by VS Code. As you change the VS Code theme, the syntax hightlighting of code blocks will change to one of four different themes, one for each VS Code ColorThemeKind:
| ColorThemeKind | hightlight.js theme |
|---|---|
| Dark | github-dark |
| Light | github |
| HighContrast | windows-high-contrast |
| HighContrastLight | windows-high-contrast-light |
It's readonly#
You may be used to typing "into the REPL," meaning typing into a terminal REPL or the the editor-based REPL window. But with Clojure and Calva, we can evaluate code directly from code files. Using comment forms (Rich Comments) to evaluate code, we not only don't have to leave the file our cursor is currently in, but we have all the history of code we've evaluated right in a file, which we can save and commit, or remove later if we want.
Quickly create Rich Comments with a Calva command
Use the Calva command "Add Rich Comment," which will add a comment form right below the form your cursor is currently at. Memorize the keyboard shortcut for this, and you can very easily create Rich Comments near the code you're working on to try out code in the REPL before adding it to your actual code.
Don't like adding scratch code to code files?
If you prefer not to leave scratch code in your code files or prefer not to have to remove it later, then create a separate scratch code file. This file can be your own personal scratch file, which you can commit, giving you a versioned history of all your scratch work, which may come in handy later. Calva has rich support for this, via the Fiddle files feature.