Error Lens

ErrorLens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and also prints the message inline.

Demo image

Features

Highlight lines containing diagnostics
Append diagnostic as text to the end of the line
Show icons in gutter
Show message in status bar

Commands (6)

Command	Description
errorLens.toggle	Error Lens: Toggle (Enable/Disable) Everything (toggle global setting `errorLens.enabled`)
errorLens.toggleError	Error Lens: Enable/Disable Errors in `errorLens.enabledDiagnosticLevels` setting.
errorLens.toggleWarning	Error Lens: Enable/Disable Warnings in `errorLens.enabledDiagnosticLevels` setting.
errorLens.toggleInfo	Error Lens: Enable/Disable Info in `errorLens.enabledDiagnosticLevels` setting.
errorLens.toggleHint	Error Lens: Enable/Disable Hint in `errorLens.enabledDiagnosticLevels` setting.
errorLens.copyProblemMessage	Error Lens: Copy problem message to the clipboard (at the active cursor).

Settings (48)

Error Lens extension settings start with errorLens.

Setting	Default	Description
enabled	true	Controls all decorations and features (except commands).
fontFamily	""	Font family of inline message.
fontWeight	"normal"	Font weight of inline message. `"normal"` is alias for 400, `"bold"` is alias for 700).
fontStyleItalic	false	When enabled - shows inline message in italic font style.
fontSize	""	Font size of inline message (CSS units).
margin	"4ch"	Distance between the last word on the line and the start of inline message (CSS units).
padding	""	Padding of the inline message. Visible when `#errorLens.messageBackgroundMode#` is set to "message".
borderRadius	"3px"	Border radius of the inline message. Visible when `#errorLens.messageBackgroundMode#` is set to "message".
enabledDiagnosticLevels	["error","warning","info"]	Customize which diagnostic levels to highlight.
messageTemplate	"$message"	Template used for all inline messages. Whitespace between items is important. List of variables: - `$message` - diagnostic message text - `$count` - Number of diagnostics on the line - `$severity` - Severity prefix taken from `#errorLens.severityText#` - `$source` - Source of diagnostic e.g. "eslint" - `$code` - Code of the diagnostic
messageMaxChars	500	Cut off inline message if it's longer than this value. (Improves performance when the diagnostic message is long).
severityText	["ERROR","WARNING","INFO","HINT"]	Replaces `$severity` variable in `#errorLens.messageTemplate#`.
messageEnabled	true	Controls whether inline message is shown or not (Including background highlight).
messageBackgroundMode	"line"	Controls how inline message is highlighted in the editor (entire line / only message / none).
statusBarIconsEnabled	false	When enabled - shows highlighted error/warning icons in status bar.
statusBarIconsPriority	-9000	Move status bar icons left or right by adjasting the number priority.
statusBarIconsAlignment	"left"	Choose on which side the icons status bar is on: left or right.
statusBarIconsUseBackground	true	When enabled - highlights status bar icons with background, when disabled - with foreground.
statusBarIconsAtZero	"hide"	What to do when there are 0 errors/warnings - hide the item or strip its background color.
statusBarMessageEnabled	false	When enabled - shows message in status bar.
statusBarMessagePriority	-10000	Move status bar message left or right by adjasting the number priority.
statusBarMessageAlignment	"left"	Choose on which side the message status bar is on: left or right.
statusBarColorsEnabled	false	When enabled - use message decoration foreground as color of Status Bar text.
statusBarMessageType	"activeLine"	Pick what to show in Status Bar: closest message or only message for the active line.
statusBarCommand	"goToProblem"	Pick command that activates on click for Status Bar.
statusBarMessageTemplate	""	Template for status bar message. Whitespace between items is important. List of variables: - `$message` - diagnostic message text - `$count` - Number of diagnostics on the line - `$severity` - Severity prefix taken from `#errorLens.severityText#` - `$source` - Source of diagnostic e.g. "eslint" - `$code` - Code of the diagnostic
exclude	[]	Specify messages that should not be highlighted (RegExp). Strings passed to the RegExp constructor: `new RegExp(EXCLUDE_ITEM, 'i');`
excludeBySource	[]	Specify sources that should not be highlighted (string). Example: `["eslint"]`
excludePatterns	[]	Exclude files by using glob pattern. Example `["*/.{ts,js}"]`
light		Specify color of decorations for when the light color theme is active.
delay	0	Delay (ms) before showing problem decorations (0 to disable). Minimum delay of 500 is enforced by the extension. New errors will be added with this delay; old errors that were fixed should disappear faster.
onSave	false	When enabled - updates decorations only on document save (manual).
onSaveTimeout	1000	Time period (ms) that used for showing decorations after the document save.
enableOnDiffView	false	Enable decorations when viewing a diff view in the editor (e.g. Git diff).
followCursor	"allLines"	Highlight only portion of the problems.
followCursorMore	0	Augments `#errorLens.followCursor#`. Adds number of lines to top and bottom when `#errorLens.followCursor#` is set to `activeLine`. Adds number of closest problems when `#errorLens.followCursor#` is `closestProblem`
gutterIconsEnabled	false	When enabled - shows gutter icons (In place of the debug breakpoint icon).
gutterIconsFollowCursorOverride	true	When enabled and `#errorLens.followCursor#` setting is not `allLines`, then gutter icons would be rendered for all problems. But line decorations (background, message) only for active line.
gutterIconSize	"100%"	Change gutter icon size. Examples: `auto`, `contain`, `cover`, `50%`, `150%`.
gutterIconSet	"default"	Change gutter icon style.
errorGutterIconPath	""	Absolute path to error gutter icon.
warningGutterIconPath	""	Absolute path to warning gutter icon.
infoGutterIconPath	""	Absolute path to info gutter icon.
errorGutterIconColor	"#e45454"	Error color of `circle` gutter icon set.
warningGutterIconColor	"#ff942f"	Warning color of `circle` gutter icon set.
infoGutterIconColor	"#00b7e4"	Info color of `circle` gutter icon set.
removeLinebreaks	true	When enabled - replaces line breaks in inline diagnostic message with whitespaces.
scrollbarHackEnabled	false	When enabled - prevents showing horizontal scrollbar in editor (caused by inline decorations).

Colors (26)

Can be specified in settings.json (workbench.colorCustomizations section)

Color	Dark	Light	HC	Description
errorLens.errorBackground	`#e454541b`	`#e4545420`	`#e454541b`	Background color of the entire line containing error.
errorLens.errorMessageBackground	`#e4545419`	`#e4545419`	`#e4545419`	Background color of the error message.
errorLens.errorBackgroundLight	`#e4545420`	`#e4545420`	`#e4545420`	Background color of the entire line containing error (Only in light themes).
errorLens.errorForeground	`#ff6464`	`#e45454`	`#ff6464`	Text color used to highlight lines containing errors.
errorLens.errorForegroundLight	`#e45454`	`#e45454`	`#e45454`	Text color used to highlight lines containing errors (Only in light themes).
errorLens.warningBackground	`#ff942f1b`	`#ff942f20`	`#ff942f1b`	Background color used to highlight lines containing warnings.
errorLens.warningMessageBackground	`#ff942f19`	`#ff942f19`	`#ff942f19`	Background color of the warning message.
errorLens.warningBackgroundLight	`#ff942f20`	`#ff942f20`	`#ff942f20`	Background color used to highlight lines containing warnings (Only in light themes).
errorLens.warningForeground	`#fa973a`	`#ff942f`	`#fa973a`	Text color used to highlight lines containing warnings.
errorLens.warningForegroundLight	`#ff942f`	`#ff942f`	`#ff942f`	Text color used to highlight lines containing warnings (Only in light themes).
errorLens.infoBackground	`#00b7e420`	`#00b7e420`	`#00b7e420`	Background color used to highlight lines containing info.
errorLens.infoMessageBackground	`#00b7e419`	`#00b7e419`	`#00b7e419`	Background color of the info message.
errorLens.infoBackgroundLight	`#00b7e420`	`#00b7e420`	`#00b7e420`	Background color used to highlight lines containing info (Only in light themes).
errorLens.infoForeground	`#00b7e4`	`#00b7e4`	`#00b7e4`	Text color used to highlight lines containing info.
errorLens.infoForegroundLight	`#00b7e4`	`#00b7e4`	`#00b7e4`	Text color used to highlight lines containing info (Only in light themes).
errorLens.hintBackground	`#17a2a220`	`#17a2a220`	`#17a2a220`	Background color used to highlight lines containing hints.
errorLens.hintMessageBackground	`#17a2a219`	`#17a2a219`	`#17a2a219`	Background color of the hint message.
errorLens.hintBackgroundLight	`#17a2a220`	`#17a2a220`	`#17a2a220`	Background color used to highlight lines containing hints (Only in light themes).
errorLens.hintForeground	`#2faf64`	`#2faf64`	`#2faf64`	Text color used to highlight lines containing hints.
errorLens.hintForegroundLight	`#2faf64`	`#2faf64`	`#2faf64`	Text color used to highlight lines containing hints (Only in light themes).
errorLens.statusBarIconErrorForeground	`#ff6464`	`#e45454`	`#ff6464`	Status bar icon item error color. Foreground is used when the `errorLens.statusBarIconsUseBackground` setting is disabled.
errorLens.statusBarIconWarningForeground	`#fa973a`	`#ff942f`	`#fa973a`	Status bar icon item error color. Foreground is used when the `errorLens.statusBarIconsUseBackground` setting is disabled.
errorLens.statusBarErrorForeground	`#ff6464`	`#e45454`	`#ff6464`	Status bar item error color.
errorLens.statusBarWarningForeground	`#fa973a`	`#ff942f`	`#fa973a`	Status bar item warning color.
errorLens.statusBarInfoForeground	`#00b7e4`	`#00b7e4`	`#00b7e4`	Status bar item info color.
errorLens.statusBarHintForeground	`#2faf64`	`#2faf64`	`#2faf64`	Status bar item hint color.

Line highlighting depends on the "errorLens.messageBackgroundMode" setting.

#fff0 - Completely transparent color.

Upstream issues

Please upvote the following VS Code issues:

Alexander

Features

Commands (6)

Settings (48)

Colors (26)

Upstream issues

More Documentation