README.md
January 27, 2026 ยท View on GitHub
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.
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 (75)
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... 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 |
| transmute | {} | Change editor decoration for specific problems (only severity for now). |
| 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:
- Api for editor insets
- Access theme's colors programmatically
- Inline text adornments break word wrapping
- Support hover decorations over the line numbers i.e. gutter
๐ More Documentation / examples
https://github.com/usernamehw/vscode-error-lens/tree/master/docs/docs.md