Monaco editor line numbers: choose useful references for the source pane

Set Monaco's lineNumbers option to 'on' for ordinary source line numbers or 'relative' for distances from the cursor. Apply the choice with editor.updateOptions() on the existing editor. The numbers are part of the source interface; they are not characters in the document. Monaco line number types

A developer reviewing a generated service notice may need to follow a comment about line 24 while keeping a narrow preview beside the source. Ordinary numbering gives the reviewer a shared location. Relative numbering helps someone moving through the file with keyboard commands, but “three lines above the cursor” is less useful as a reference sent to another person.

Change the labels without rebuilding the document

For a standalone editor that your application has already initialized:

editor.updateOptions({
  lineNumbers: 'on',
  lineNumbersMinChars: 3,
  selectOnLineNumbers: true
});

lineNumbersMinChars reserves a minimum width for the number column, measured in characters. It is not the maximum source line number and does not truncate a large file. selectOnLineNumbers controls whether clicking a line number selects the corresponding line. Keep the setting consistent with what the interface teaches its users. Editor options

The public numbering modes also include 'off' and 'interval'. Interval numbering reduces the number of labels shown; it does not delete intervening source lines. Try the built-in modes before introducing an application-specific labeling scheme.

If the source pane is not initialized yet, the Monaco HTML editor setup covers its model and container. Changing numbering should retain that model, its current edits, and the selected document.

Use custom labels only when their meaning is visible

Monaco also accepts a function that receives a source line number and returns a string. For example, an interface that explicitly identifies a pasted excerpt as starting at original file line 101 could display:

editor.updateOptions({
  lineNumbers: lineNumber => String(lineNumber + 100)
});

This changes displayed labels only. Monaco's model positions still begin at line 1 for this excerpt. A diagnostic at excerpt line 4 must therefore use model line 4, even though the visible label reads 104. Keep the offset in the surrounding excerpt metadata rather than trying to derive model positions by scraping the gutter.

Only apply an offset when the excerpt really represents those source lines. If the author edits the excerpt, the original-file mapping may no longer hold. For a durable review comment, store the relevant revision and text alongside the location.

Distinguish source lines from wrapped rows

A long paragraph on source line 8 can occupy several rows in a narrow editor. It still has one source line number. Monaco word wrapping changes how that line fits in the pane without inserting newlines.

Use a two-line development document with a long first line. Record its value and line count, turn on wrapping, then narrow the pane. Confirm that the continuation rows do not become new model lines. Switch ordinary numbering to relative numbering and move the cursor; the labels should change while the source value stays the same.

Finally, select a line through the gutter if that behavior is enabled, copy the selection, and inspect the copied source. It should contain the selected text rather than the visible number labels. When sending a review reference, include enough neighboring text and the document revision for the recipient to locate the same passage.

Keep reading