Line-anchored output and the filter chips

Title: Line-anchored output and the filter chips

JSLab feature notes: one docs page, explained. Today: The output panel. JSLab is a JavaScript & TypeScript scratchpad for macOS. You type, it runs, and the output panel fills up. This note covers the two things that make that panel readable: every row knows its line, and four chips filter what you see.

JSLab 功能说明：一份文档页面，现已解析。今日主题：输出面板。JSLab 是 macOS 上的 JavaScript 和 TypeScript 暂存器。你输入代码，它便运行，输出面板随之填充。本说明涵盖了让该面板易于阅读的两项功能：每一行都知道其对应的代码行，以及四个用于过滤显示内容的标签（chips）。

Every row knows its line Each result, log and error appears as a row tagged with the line that produced it. The link works both ways: Hover a row and its line lights up in the editor. Put the caret on a line and its rows light up in the output. Click a row’s line number and the caret jumps there. Try it with the example from the docs: const width = 12; const height = 5; width * height; width + height; Math.hypot(width, height); Three rows: 60, 17 and 13, each tagged with its line. In a five-line file that’s a nicety. In a two-hundred-line one it’s the difference between reading output and searching for it. When you re-run, rows whose values changed tint for a moment, so you see what your edit affected. Rows on the line you’re typing on don’t flash.

每一行都知道其对应的代码行：每个结果、日志和错误都会作为一行显示，并标记上生成它的代码行号。这种关联是双向的：悬停在某一行上，编辑器中对应的代码行会高亮显示。将光标置于某一行，输出面板中对应的行也会高亮。点击某行的行号，光标会跳转至该处。试用文档中的示例：const width = 12; const height = 5; width * height; width + height; Math.hypot(width, height); 三行结果：60、17 和 13，每一行都标记了对应的代码行号。在五行的文件中这只是个小便利，但在两百行的文件中，这就是“直接阅读输出”与“费力搜索输出”的区别。当你重新运行时，数值发生变化的行会短暂闪烁，让你看到编辑产生的影响。你正在输入的行不会闪烁。

The four chips Above the output sit four filter chips: All, Results, Logs and Errors. Each shows a live count, and the counts stay visible at zero, so “Errors 0” is a thing you can glance at. What counts as what: Results: values from Auto Log and magic comments. Logs: console.log, and also console.info and console.warn. Errors: thrown errors, plus stderr and a failed console.assert. Here’s a run that throws: 9.99 is a result tagged :9, the error is tagged :4 with its stack frames, and the chips read All 2, Results 1, Logs 0, Errors 1. The same filters are commands: Output: Show All, Output: Show Results, Output: Show Logs and Output: Show Errors, in the command palette (⇧⌘P).

四个标签：输出面板上方有四个过滤标签：全部 (All)、结果 (Results)、日志 (Logs) 和错误 (Errors)。每个标签都显示实时计数，即使计数为零也会保持可见，因此你可以一眼看到“Errors 0”。各分类定义如下：结果：来自自动日志 (Auto Log) 和魔法注释的值。日志：console.log，以及 console.info 和 console.warn。错误：抛出的错误，以及 stderr 和失败的 console.assert。以下是一个抛出错误的运行示例：9.99 是标记为 :9 的结果，错误标记为 :4 并附带堆栈帧，此时标签显示为：全部 2，结果 1，日志 0，错误 1。这些过滤器同样对应命令：Output: Show All、Output: Show Results、Output: Show Logs 和 Output: Show Errors，可在命令面板 (⇧⌘P) 中使用。

Two small things Text written with process.stdout.write gets its own rows, without a line number, since no single line produced it. Right-click empty space in the panel for Copy All, which copies every entry the current filter shows. Filter to Errors, Copy All, paste into an issue.

两件小事：使用 process.stdout.write 写入的文本会拥有独立的行，且没有行号，因为它们并非由单一代码行产生。在面板空白处右键点击可选择“全部复制” (Copy All)，这会复制当前过滤器显示的所有条目。过滤到“错误”，点击“全部复制”，即可粘贴到问题反馈中。

Turning it down Both display options live in Settings → Appearance: Output Highlighting colours values by type, and Output Line Numbers shows the source line beside each row. Both are on by default. JSLab launches Nov 15. The full page, with a runnable example for each section: https://js-lab.app/docs/output

关闭选项：两个显示选项位于“设置”→“外观”中：输出高亮 (Output Highlighting) 按类型为数值着色，输出行号 (Output Line Numbers) 在每行旁边显示源代码行号。两者默认开启。JSLab 将于 11 月 15 日发布。完整页面及各部分的运行示例请见：https://js-lab.app/docs/output