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 (15)

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.toggleInlineMessage	Error Lens: Toggle global setting `"errorLens.messageEnabled"`.
errorLens.searchForProblem	Error Lens: Open problem in default browser (controlled by `errorLens.searchForProblemQuery` setting).
errorLens.selectProblem	Error Lens: Set editor selection to the problem range (controlled by `errorLens.selectProblemType` setting).
errorlens.toggleWorkspace	Error Lens: Exclude/Include current workspace by fs path.
errorLens.disableLine	Error Lens: Add a comment to disable line for linter rule. Comment format is controlled by `"errorLens.disableLineComments"` setting.
errorLens.findLinterRuleDefinition	Error Lens: Search in local linter files (like `.eslintrc.json`) for the rule definition. Target files are controlled by "errorLens.lintFilePaths" setting.
errorLens.copyProblemMessage	Error Lens: Copy problem message to the clipboard (at the active cursor).
errorLens.excludeProblem	Error Lens: Exclude problem (at the active cursor) (write into settings).
errorLens.copyProblemCode	Error Lens: Copy problem code to the clipboard (at the active cursor).
errorLens.updateEverything	Error Lens: Update all decorations. Supports args {"kind": "update" \| "clear"}

Settings (74)

Error Lens extension settings start with errorLens.

Setting	Default	Description
enabled	true	Controls all decorations and features (except commands).
respectUpstreamEnabled	{"enabled":true, "inlineMessage":true, "gutter":true, "statusBar":false}	When enabled - extension will take into account global VSCode setting `#problems.visibility#`. (1.85.0 changelog).
enabledInMergeConflict	true	Controls if decorations are shown if the editor has git merge conflict indicators `<<<<<<<` or `=======` or `>>>>>>>`.
fontFamily	""	Font family of inline message. demo. May break `#errorLens.alignMessage#`
fontWeight	"normal"	Font weight of inline message. `"normal"` is alias for 400, `"bold"` is alias for 700). demo
fontStyleItalic	false	When enabled - shows inline message in italic font style. demo
fontSize	""	Font size of inline message (CSS units). Use negative value to have it relative to the editor's fontSize (e.g. `-3px`). May break `#errorLens.alignMessage#`. demo.
margin	"4ch"	Distance between the last word on the line and the start of inline message (CSS units). demo
alignMessage	{"start":0, "end":0, "minimumMargin":4, "padding":[0, 0], "useFixedPosition":true}	Align inline error message (either by starting position or ending position). Only works for monospace fonts. Set "start" and "end" to 0 to disable. demo
border	["", "", "", ""]	Border of the inline message. Examples: `1px solid`, `1px dashed`, `2px dotted`, `1px solid [#00000050](https://github.com/usernamehw/vscode-error-lens/issues/00000050)`... Set to empty string to disable. demo
padding	""	Padding of the inline message. Visible when `#errorLens.messageBackgroundMode#` is set to "message". demo
borderRadius	"0.2em"	Border radius of the inline message. Visible when `#errorLens.messageBackgroundMode#` is set to "message". demo
enabledDiagnosticLevels	["error", "warning", "info"]	Customize which diagnostic levels(severity) to highlight. demo
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 demo
messageMaxChars	500	Cut off inline message if it's longer than this value. (Improves performance when the diagnostic message is long). demo
severityText	["⛔", "⚠", "ℹ", "🍏"]	Replaces `$severity` variable in `#errorLens.messageTemplate#`. demo
messageEnabled	true	Controls whether inline message is shown or not (Including background highlight). demo
messageBackgroundMode	"line"	Controls how inline message is highlighted in the editor (entire line / only message / none). demo
problemRangeDecorationEnabled	false	When checked - highlight the entire problem range. demo
editorHoverPartsEnabled	{"messageEnabled":false, "sourceCodeEnabled":false, "buttonsEnabled":false}	Controls which parts of the editor hover tooltip to show.
statusBarIconsEnabled	false	When enabled - shows highlighted error/warning icons in status bar. demo
statusBarIconsPriority	-9000	Move status bar icons left or right by adjusting the number priority.
statusBarIconsAlignment	"left"	Choose on which side the icons status bar is on: left or right.
statusBarIconsTargetProblems	"all"	Which problems to use for counting problems at icons status bar.
statusBarIconsUseBackground	true	When enabled - highlights status bar icons with background, when disabled - with foreground.
statusBarIconsAtZero	"removeBackground"	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. demo
statusBarMessagePriority	-10000	Move status bar message left or right by adjusting 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. Uses colors `errorLens.statusBarErrorForeground`, `errorLens.statusBarWarningForeground`, `errorLens.statusBarInfoForeground`, `errorLens.statusBarHintForeground`. demo
statusBarMessageType	"activeLine"	Pick what to show in Status Bar: closest message or only message for the active line.
statusBarCommand	"goToProblem"	Command that executes 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
replace	[]	Specify message to transform. E.g. if this is configured to [{ matcher: 'foo (.*)', message: 'just $1' }], the message 'foo bar' would be displayed as 'just bar'. demo
excludeByMessage	[]	Exclude diagnostics by message. Excludes when the diagnostic message contains the exlcuding string(case-insensitive). Can use Regular Expressions (use object instead of a string).
excludeBySource	[]	Specify `source` or `source(code)` pair to exclude. Examples: - `eslint` disable all ESLint problems - `eslint(padded-blocks)` disable `padded-blocks` rule of ESLint - `Pylance` disable all Pylance linter problems - `Pylance(reportUndefinedVariable)` disable `reportUndefinedVariable` rule of Pylance
excludePatterns	[]	Exclude files by using glob pattern. Example `["*/.{ts,js}"]`
excludeWorkspaces	[]	Exclude workspaces by path.
disableLineComments	{...}	Used for `errorLens.disableLine` command that adds a comment disabling linter rule for a line. To force comment on the same line - add `SAME_LINE` to the message: `"eslint": "// eslint-disable-line $code SAME_LINE"`
lintFilePaths	{...}	Specify where to search for linter rule definitions by diagnostic source (glob for local linter files). `node_modules` folder is excluded.
searchForProblemQuery	"https://duckduckgo.com/?q=$message"	Pick query to open in default browser when searching for problem with `errorLens.searchForProblem` command.
selectProblemType	"closestProblem"	Which problem to select (closest / active line) when executing `errorLens.selectProblem` command.
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. `#errorLens.delayMode#` controls how to handle the delay.
delayMode	"new"	Pick which version of the delay to use.
onSave	false	When enabled - updates decorations only on document save (manual).
onSaveTimeout	500	Time period (ms) that used for showing decorations after the document save (manual, not auto save).
onSaveUpdateOnActiveEditorChange	true	When `#errorLens.onSave#` enabled - extension still draws decorations when active/visible editors change.
enableOnDiffView	false	Enable decorations when viewing a diff view in the editor (e.g. Git diff). demo
followCursor	"allLines"	Highlight only portion of the problems. demo
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` demo
gutterIconsEnabled	false	When enabled - shows gutter icons (In place of the debug breakpoint icon). demo
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. demo
gutterIconSize	"100%"	Change gutter icon size. Examples: `auto`, `contain`, `cover`, `50%`, `150%` (CSS units). demo
gutterIconSet	"default"	Change gutter icon style. demo
gutterEmoji	{"error":"💀", "warning":"😞", "info":"🆗", "hint":"🍏"}	Pick emoji symbol for gutter icon when `#errorLens.gutterIconSet#` is `emoji`. demo
errorGutterIconPath	""	Absolute path to error gutter icon. demo
warningGutterIconPath	""	Absolute path to warning gutter icon. demo
infoGutterIconPath	""	Absolute path to info gutter icon. demo
hintGutterIconPath	""	Absolute path to hint gutter icon. demo
errorGutterIconColor	"#e45454"	Error color of simple gutter icons (shapes and letters). demo
warningGutterIconColor	"#ff942f"	Warning color of simple gutter icons (shapes and letters). demo
infoGutterIconColor	"#00b7e4"	Info color of simple gutter icons (shapes and letters). demo
hintGutterIconColor	"#2faf64"	Hint color of simple gutter icons (shapes and letters). demo
removeLinebreaks	true	When enabled - replaces line breaks in inline diagnostic message with whitespaces.
replaceLinebreaksSymbol	"⏎"	Symbol to replace linebreaks. Requires enabling `#errorLens.removeLinebreaks#`.
scrollbarHackEnabled	false	When enabled - prevents showing horizontal scrollbar in editor (caused by inline decorations). Also prevents mouse hover at inline message. demo
ignoreUntitled	false	Controls whether to run on untitled (unsaved) files.
ignoreDirty	false	Controls whether to run on dirty (modified unsaved) files.
codeLensEnabled	false	Controls whether to show the Error Lens as a Code Lens above the code. demo
codeLensLength	{"min":0, "max":200}	Enforce minimum and maximum length of code lens messages.
codeLensTemplate	"$severity $message"	Template used for all messages appearing in the `#errorLens.codeLensEnabled#`. 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
codeLensOnClick	"showQuickFix"	Controls what do on clicking the `#errorLens.codeLensEnabled#`.
experimental	{...}	Experimental / temporary settings.

Colors (30)

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.errorRangeBackground	`#e4545419`	`#e4545419`	`#e4545419`	Background color of the error range (when errorLens.problemRangeDecorationEnabled setting enabled).
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.warningRangeBackground	`#ff942f19`	`#ff942f19`	`#ff942f19`	Background color of the warning range (when errorLens.problemRangeDecorationEnabled setting enabled).
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.infoRangeBackground	`#00b7e419`	`#00b7e419`	`#00b7e419`	Background color of the info range (when errorLens.problemRangeDecorationEnabled setting enabled).
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.hintRangeBackground	`#17a2a219`	`#17a2a219`	`#17a2a219`	Background color of the hint range (when errorLens.problemRangeDecorationEnabled setting enabled).
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:

📚 More Documentation / examples

https://github.com/usernamehw/vscode-error-lens/tree/master/docs/docs.md