Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Error LensNew to Visual Studio Code? Get it now.

Error Lens

Alexander

|
213,244 installs
| (48) | Free
Improve highlighting of errors, warnings and other language diagnostics.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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:

  • [theming] Access theme's colors programmatically
  • [theming] when completing color keys in settings, fill in current value
  • Inline text adornments break word wrapping
  • OnClick event on Gutter
  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2021 Microsoft