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) All Decorations
errorLens.toggleError	Error Lens: Toggle Errors
errorLens.toggleWarning	Error Lens: Toggle Warnings
errorLens.toggleInfo	Error Lens: Toggle Info
errorLens.toggleHint	Error Lens: Toggle Hint
errorLens.copyProblemMessage	Error Lens: Copy Problem Message

Settings (35)

Error Lens extension settings start with errorLens.

Setting	Type	Default	Description
fontFamily	string	""	Font family of message. If the new font breaks layout - try to use smaller fontSize.
fontWeight	string	"normal"	Font Weight of message.`"normal"` is alias for 400, `"bold"` is alias for 700)
fontStyleItalic	boolean	false	When enabled - shows message in italic.
fontSize	string	""	Font size of message (CSS units).
margin	string	"4ch"	Distance between the end of the line and the message (CSS units).
padding	string	""	Padding of the message. Visible difference when `message` colors are set. issues/23. Example: `2px 1ch`.
borderRadius	string	"3px"	Border radius of the message. Visible difference when `message` colors are set. issues/23. Example: `5px`.
enabledDiagnosticLevels	array	["error","warning","info","hint"]	Customize which diagnostic levels to highlight.
annotationPrefix	array	["ERROR: ","WARNING: ","INFO: ","HINT: "]	Specify diagnostic message prefixes (when `addAnnotationTextPrefixes` is enabled). For example, emoji: ❗ ⚠ ℹ.
addAnnotationTextPrefixes	boolean	false	When enabled - prepends diagnostic severity ('ERROR:', 'WARNING:' etc) to the message. (Prefixes can be configured with `annotationPrefix` setting).
addNumberOfDiagnostics	boolean	false	When enabled - prepends number of diagnostics on the line. Like: `[1/2]`.
messageEnabled	boolean	true	Controls whether inline message is shown or not (Including background highlight).
statusBarMessageEnabled	boolean	false	When enabled - shows message in status bar.
statusBarColorsEnabled	boolean	false	When enabled - use message decoration foreground as color of Status Bar text.
statusBarMessageType	string	"activeLine"	Pick what to show in Status Bar: closest message or only message for the active line.
exclude	array	[]	Specify messages that should not be highlighted (RegExp).
excludeBySource	array	[]	Specify sources that should not be highlighted (string). Example: `["eslint"]`
excludePatterns	array	[]	Exclude files by using glob pattern. Example `["*/.{ts,js}"]`
light	object		Specify color of decorations for when the light color theme is active.
delay	integer	0	EXPERIMENTAL Delay (ms) before showing problem decorations (0 to disable).
onSave	boolean	false	When enabled - updates decorations only on document save.
onSaveTimeout	number	1000	Time period (ms) that used for showing decorations after the document save.
followCursor	string	"allLines"	Highlight only portion of the problems.
followCursorMore	number	0	Augments `followCursor`. Adds number of lines to top and bottom when `followCursor` is `activeLine`. Adds number of closest problems when `followCursor` is `closestProblem`
gutterIconsEnabled	boolean	false	When enabled - shows gutter icons (In place of the debug breakpoint icon).
gutterIconsFollowCursorOverride	boolean	true	When enabled and `followCursor` setting is not `allLines`, then gutter icons would be rendered for all problems. But line decorations (background, message) only for active line.
gutterIconSize	string	"100%"	Change gutter icon size. Examples: `auto`, `contain`, `cover`, `50%`, `150%`
gutterIconSet	string	"default"	Change gutter icon style.
errorGutterIconPath	string		Absolute path to error gutter icon.
warningGutterIconPath	string		Absolute path to warning gutter icon.
infoGutterIconPath	string		Absolute path to info gutter icon.
errorGutterIconColor	string	"#e45454"	Error color of `circle` gutter icon set.
warningGutterIconColor	string	"#ff942f"	Warning color of `circle` gutter icon set.
infoGutterIconColor	string	"#00b7e4"	Info color of `circle` gutter icon set.
scrollbarHackEnabled	boolean	false	When enabled - prevents showing horizontal scrollbar for decorations. (Might have a conflict with `errorLens.fontFamily` or `errorLens.padding` settings).

Colors (24)

Color	Dark	Light	HC	Description
errorLens.errorBackground	`#e454541b`	`#e4545420`	`#e454541b`	Background color of the entire line containing error.
errorLens.errorMessageBackground	`#fff0`	`#fff0`	`#fff0`	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	`#fff0`	`#fff0`	`#fff0`	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	`#fff0`	`#fff0`	`#fff0`	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	`#fff0`	`#fff0`	`#fff0`	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.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.

Colors can be configured in settings.json (workbench.colorCustomizations section)

#fff0 - is a completely transparent color.

Upstream issues

Please upvote the following VS Code issues:

Alexander

Features

Commands (6)

Settings (35)

Colors (24)

Upstream issues