Miscellaneous

January 29, 2026 · View on GitHub

// keybindings.json
{
    "key": "ctrl+u",
    "command": "errorLens.toggleInlineMessage",
    //          ^ Toggles global setting `errorLens.messageEnabled`
},

If you don't want to go with the hotkey route - it's possible to:

Exclude problems (in workspace, by source, by code, by message) excludeByMessage, excludeBySource, excludePatterns(Glob), excludeWorkspaces
Show fewer decorations (render decoration only on the active line) followCursor
Delay showing decorations (delay ms / on document save) delay, onSave, ignoreDirty
Transform problem message (make it shorter maybe) replace
Configure other settings or colors to make it less distracting

1. Exclude problems:

"errorLens.excludeByMessage": [
    "Missing semicolon",
    "Newline required at end of file but not found",
    "More than 1 blank line not allowed",
],
// OR
"errorLens.excludeBySource": [
    "eslint(padded-blocks)",
],

2. Show only active line decoration or closest problem:

"errorLens.followCursor": "activeLine",
// OR
"errorLens.followCursor": "closestProblem",

3. Delay showing problems:

"errorLens.delay": 1500,
// OR
"errorLens.onSave": true,

Toggle all decorations and features (background highlighting, inline message, gutter icons, status bar message, code lens). Extension adds a command to toggle this setting: errorLens.toggle Error Lens: Toggle (Enable/Disable) Everything

`errorLens.respectUpstreamEnabled`

Disable decorations or features when VSCode setting problems.visibility ("Controls whether the problems are visible throughout the editor and workbench") is disabled.

`errorLens.enabledInMergeConflict`

Disable decorations when file has merge conflict symbols <<<<<<< or ======= or >>>>>>>.

`errorLens.fontFamily`

Change font family of inline message. Not supported natively by VSCode. Non-monospace fonts can usually fit more characters in the same space. May break errorLens.alignMessage.

""
"Arial"
"Times"
"Helvetica"
"Gabriola"
"Calibri"
"Comic Sans MS"
"Cascadia Code"
"Segoe Print"

`errorLens.fontWeight`

Whether to use bold or not font weight for messages.

"normal"	"bold"

`errorLens.fontStyleItalic`

Whether to use italic font style or not for messages.

false	true

`errorLens.fontSize`

Change font size of inline message. Not supported natively by VSCode. Mostly useful to make message smaller, not bigger. Use negative value to have it relative to the editor's fontSize (e.g. -3px). May break errorLens.alignMessage.

""
"12px"

`errorLens.margin`

Extra space between the end of the line (end of text) and the inline message.

"4ch"	"0"	"100px"

`errorLens.alignMessage`

Align message to be in the same column (if possible). Only works with monospace fonts.

`"errorLens.alignMessage": { "start": 40, "end": 0, "padding": [0, 0.5], },`
`"errorLens.alignMessage": { "start": 0, "end": 80, "padding": [0, 0.5], },`

`errorLens.border`

"errorLens.border": [
	"1px solid",
	"1px dotted",
	"1px dashed",
	"1px solid #00000040",
],

`errorLens.padding`

Add space around the inline message. Only visible when errorLens.messageBackgroundMode is set to message.

"0"	"2px 0.5ch"

`errorLens.borderRadius`

Round corners for inline message. Only visible when errorLens.messageBackgroundMode is set to message.

"0.3em"	"0"	"50%"	"10px 30px 10px 30px"

`errorLens.enabledDiagnosticLevels`

Controls which diagnostics to include (error/warning/info/hint) for all features of this extension (decorations, gutter, status bar, code lens,...).

["error", "warning", "info", "hint"]	["error", "warning"]	["error", "info"]

`errorLens.messageTemplate`

Template used for all inline messages. Possible 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

"errorLens.messageTemplate": "[$count] $severity $message $source($code)",

`errorLens.messageMaxChars`

500
50

`errorLens.severityText`

Replaces $severity variable in errorLens.messageTemplate.

`"errorLens.messageTemplate": "$severity $message", "errorLens.severityText": [ "❌", "⚠", "ℹ", "📗", ],`	`"errorLens.messageTemplate": "$severity $message", "errorLens.severityText": [ "■", "■", "■", "■", ],`

`"errorLens.messageTemplate": "$severity $message", "errorLens.severityText": [ "▣", "◈", "◉", "⛆", ],`	`"errorLens.messageTemplate": "$severity$message", "errorLens.severityText": [ "ERROR: ", "WARNING: ", "", "", ],`

`errorLens.messageEnabled`

Controls visibility of inline message (including background highlighting). Doesn't include gutter icons.

true	false

`errorLens.messageBackgroundMode`

"line"	"message"	"none"

`errorLens.problemRangeDecorationEnabled`

VSCode now supports natively highlighting problem ranges even without this extension (except hint severity):

"workbench.colorCustomizations": {
    "editorError.background": "#ff000030",
    "editorWarning.background": "#ee990030",
    "editorInfo.background": "#0095d530",
},

Still, it might be useful if you decide to disable native error highlighting and use the one from this extension (after delay or use different highlighting methods like borders):

"workbench.colorCustomizations": {
    "editorError.foreground": "#fff0",
    "editorWarning.foreground": "#fff0",
    "editorInfo.foreground": "#fff0",
    "editorHint.foreground": "#fff0",
},

"errorLens.problemRangeDecorationEnabled": true,

"errorLens.decorations": {
    "errorRange": {
        "border": "1px dashed red",
        "backgroundColor": "#ff000090",
        "color": "#ffffff",
    },
    "warningRange": {
        "border": "2px dotted #fa9121",
    },
    "infoRange": {
        "textDecoration": ";background:linear-gradient(45deg,#ff8400,#00d9ff);background-clip:text;color:transparent;border-bottom:2px solid #00d9ff",
        "backgroundColor": "#fff0",
    },
    "hintRange": {
        "textDecoration": ";box-shadow:0 0 5px 3px #2faf6470;border-radius:0.25em",
    },
},

`errorLens.editorHoverPartsEnabled`

Controls which parts of hover are enabled (for the text editor; Doesn't affect status bar message hover).

messageEnabled - Shows problem message.
sourceCodeEnabled Shows prblem source & code and buttons to copy them to the clipboard
buttonsEnabled - Show buttons like Exclude, Open Definition, Search...

`errorLens.statusBarIconsEnabled`

Show icons for Errors & Warnings in status bar similar to native ones, but with the ability to change color / background color.

`errorLens.statusBarIconsPriority`

Move status bar icons right/left.

`errorLens.statusBarIconsAlignment`

Choose alignment of the status bar icons left/right side of the viewport.

`errorLens.statusBarIconsTargetProblems`

Choose what to include in counters for problems (status bar icons).

`errorLens.statusBarIconsUseBackground`

When enabled - highlight status bar with background colors. Only 2 VSCode colors allowed (statusBarItem.errorBackground & statusBarItem.warningBackground).

`errorLens.statusBarIconsAtZero`

Choose what happens to status bar icons when there are no errors - hide or remove background color.

`errorLens.statusBarMessageEnabled`

Show problem message in Status Bar.

`errorLens.statusBarMessageType`

Choose which diagnostic to use for status bar message:

closestProblem - Closest to the cursor diagnostic
closestSeverity - Closest to the cursor diagnostic sorted by severity (e.g. error will be shown before warning even if it's farther from the cursor)
activeLine - Show only diagnostic that is on the same line as the cursor
activeCursor - Similar to activeLine but follows the cursor movement inside the line

`errorLens.statusBarMessagePriority`

Move status bar icons right/left.

`errorLens.statusBarMessageAlignment`

Choose alignment of the status bar message left/right side of the viewport.

`errorLens.statusBarColorsEnabled`

Uses colors errorLens.statusBarErrorForeground, errorLens.statusBarWarningForeground, errorLens.statusBarInfoForeground, errorLens.statusBarHintForeground.

false
true

────────────────────────────────────────────────────────────

`errorLens.statusBarCommand`

Command that executes on click for Status Bar.

`errorLens.statusBarMessageTemplate`

Almost the same as errorLens.messageTemplate but instead affects status bar message.

`errorLens.replace`

Replace message with custom one. Uses strings to create RegExp with iu flags.

`"errorLens.replace": [],`
`"errorLens.replace": [ { "matcher": "Missing semicolon", "message": ";", }, ],`
`"errorLens.replace": [],`
`"errorLens.replace": [ { "matcher": "Missing return type on (.+)", "message": "Type \$1" } ],`
`"errorLens.replace": [ { "matcher": "Missing return type on", "message": "<==", }, ],`
`"errorLens.replace": [ { "matcher": "Missing return type on", "message": "(。_。)", }, ],`

`errorLens.transmute`

Transmute severity will change decoration's severity (e.g. error => warning) and can change which decoration is rendered (only 1 decoration with the highest severity is rendered per line).

`"errorLens.transmute": {},`	`"errorLens.transmute": { "ESLint": { "target": { "source": "eslint", }, "severity": "info", }, },`

Transmute decoration will change decoration style:

"errorLens.transmute": {},

"errorLens.transmute": {
	"semi": {
		"target": {
			"message": "missing semicolon",
		},
		"decoration": {
			"light": {
				"after": {
					"backgroundColor": "#00000010",
					"color": "#444444",
				},
			},
		},
	},
},

`errorLens.excludeByMessage`

Exclude diagnostics by message. Excludes when the diagnostic message contains the matching string(case-insensitive). Can use Regular Expressions (use object instead of a string).

"errorLens.excludeByMessage": [
	"missing semicolon",// string match(includes), case-insensitive
	{
		"regex": "missing semicolon",// RegExp match
		"flags": "iu"
	},
],

`errorLens.excludeBySource`

Exclude diagnostics by source or source+code pair.

`errorLens.excludePatterns`

Exclude files by using glob pattern (VSCode flavor. May have differences like Glob matching should be case insensitive Issue#10633). Example [\"**/*.{ts,js}\"].

`errorLens.excludeWorkspaces`

Exclude the entire workspace from highlighting problems. Related Command: errorlens.toggleWorkspace .

`errorLens.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"

`errorLens.lintFilePaths`

Specify where to search for linter rule definitions by diagnostic source (glob for local linter files). node_modules folder is excluded. Used when running errorLens.findLinterRuleDefinition command.

`errorLens.searchForProblemQuery`

Pick query to open in default browser when searching for problem with errorLens.searchForProblem command.

`errorLens.selectProblemType`

Which problem to select (closest / active line) when executing errorLens.selectProblem command.

closestProblem, - Show closest to the cursor diagnostic
closestSeverity - Show closest to the cursor diagnostic (sorted by severity e.g. error will be shown before warning even if it's farther from the cursor)
activeLine - Show only diagnostic that is on the same line as the cursor.

`errorLens.light`

Override colors when on of the "light" themes is used. Only for colors that are specified in "settings", not in "colors".

`errorLens.delay`

Wait this amount (in milliseconds) before showing decorations.

`errorLens.delayMode`

new - Old/stale problems should disappear immediately while new problems should respect errorLens.delay
old - Buggy/Overcomplicated old implementation
debounce - Simply use debounce() from Lodash library. Old/fixed problems also wait errorLens.delay ms before being hidden.

`errorLens.onSave`

When enabled - updates decorations only on document save (manual, not auto save).

`errorLens.onSaveTimeout`

Wait this much (ms) before showing decorations after the document save.

`errorLens.onSaveUpdateOnActiveEditorChange`

Update decorations immediately or not when switching focus from one Text Editor to another.

`errorLens.enableOnDiffView`

Whether or not to show decorations on diff editor.

false
true

`errorLens.followCursor`

Highlight only closest to the cursor problem:

"allLines"
"activeLine"
"closestProblem"
"allLinesExceptActive"

`errorLens.followCursorMore`

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 set to closestProblem.

0
1

`errorLens.gutterIconsEnabled`

Whether to show gutter icons or not.

false	true

`errorLens.gutterIconsFollowCursorOverride`

When enabled and errorLens.followCursor setting is not set to allLines, then gutter icons would be rendered for all problems. This setting can overcome that:

"errorLens.gutterIconsEnabled": true,
"errorLens.followCursor": "activeLine",
"errorLens.gutterIconsFollowCursorOverride": true,

"errorLens.gutterIconsEnabled": true,
"errorLens.followCursor": "activeLine",
"errorLens.gutterIconsFollowCursorOverride": false,

`errorLens.gutterIconSize`

Change size of gutter icons:

"100%"	"70%"	"150%"

`errorLens.gutterIconSet`

"default"	"defaultOutline"

"squareRounded"	"circle"

"letter"	"emoji"

`errorLens.gutterEmoji`

Control image shown in gutter when errorLens.gutterIconSet is "emoji". Can use other utf-8 symbols like ♞/⚃/⛆/★/▣/◈/... Possible to fit 2 symbols that are not as wide as emoji.

"errorLens.gutterEmoji": {
    "error": "🍎",
    "warning": "🍊",
    "info": "⟁",
    "hint": ":(",
},

`errorLens.errorGutterIconPath`

Set custom icons for gutter.

"errorLens.errorGutterIconPath": "C:\\temp\\Stop.png",
"errorLens.warningGutterIconPath": "C:\\temp\\Warning.png",
"errorLens.infoGutterIconPath": "C:\\temp\\vscode.png",
"errorLens.hintGutterIconPath": "C:\\temp\\folder.png",

`errorLens.errorGutterIconColor`

Change color of gutter icons (for shapes and letters).

"errorLens.gutterIconSet": "squareRounded",
"errorLens.errorGutterIconColor": "#6a54e4",
"errorLens.warningGutterIconColor": "#29d8ff",
"errorLens.infoGutterIconColor": "#21d439",
"errorLens.hintGutterIconColor": "#b5a7b0",

"errorLens.gutterIconSet": "letter",
"errorLens.errorGutterIconColor": "#6a54e4",
"errorLens.warningGutterIconColor": "#29d8ff",
"errorLens.infoGutterIconColor": "#21d439",
"errorLens.hintGutterIconColor": "#b5a7b0",

`errorLens.warningGutterIconColor`

Same as errorLens.errorGutterIconPath

`errorLens.infoGutterIconColor`

Same as errorLens.errorGutterIconPath

`errorLens.hintGutterIconColor`

Same as errorLens.errorGutterIconPath

`errorLens.removeLinebreaks`

Diagnostic message may contain linebreaks, but inline message decorations are ... inline. This replaces linebreaks (multiple in a row too) with the symbol controlled by errorLens.replaceLinebreaksSymbol.

`errorLens.replaceLinebreaksSymbol`

When errorLens.removeLinebreaks is enabled => replaced linebreaks \n with the new symbol that can be represented inline (⏎ by default).

`errorLens.scrollbarHackEnabled`

VSCode has a setting to completely disable horizontal scrollbar (better than this scrollbar hack and also will apply to any other extension that contributes inline messages):

"editor.scrollbar.horizontal": "hidden",

When showing inline message decorations - VSCode also shows horizontal scrollbar that stays even after message is removed. This is a hack that makes inline message to be absolutely positioned position:absolute; to not show any scrollbars. It can make the errorLens.padding look differently though.

false
true

`errorLens.decorations`

Advanced control over decorations (only problem message & problem range).

"errorLens.decorations": {
    "errorMessage": {
        "textDecoration": ";background:linear-gradient(to right, #0088ff, #0a9c33);border-radius:0.3em;padding:0 0.5ch;",
        "color": "#fff",
        "fontWeight": "bold",
    },
},

none => does nothing
showProblemsView => Open VSCode built-in Problems view (runs workbench.actions.view.problems)
showQuickFix => Open Quick Fix menu (runs editor.action.quickFix)
searchForProblem => Search for problem message in your default browser (runs errorLens.searchForProblem)

Miscellaneous

Custom CSS

Status bar messages can be hard to read, so I'm using Custom CSS to change the font-size of the status bar items:

/* ──── StatusBar ───────────────────────────────────────────── */
.statusbar {
    /* Monospace font and emoji fallback */
	font-family: Menlo, Monaco, Consolas, 'Droid Sans Mono', 'Courier New', monospace, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji' !important;
	font-size: 14px !important;/* 12px => 14px */
}

.monaco-workbench .part.statusbar > .items-container > .statusbar-item {
	max-width: 70vw !important;/* 40% => 70% Viewport width */
}

.monaco-workbench .part.statusbar > .items-container > .statusbar-item > :first-child {
	margin-left: 0 !important;/* Remove margin (fit more items) */
	margin-right: 0 !important;
}
/* ──────────────────────────────────────────────────────────── */

/* ──── Target only Error Lens status bar items ─────────────── */
/* "errorLens.statusBarMessageEnabled": true, */
#usernamehw\.errorlens\.errorLensMessage {
    font-size: 14px !important;
}

/* "errorLens.statusBarIconsEnabled": true, */
#usernamehw\.errorlens\.errorLensError {}
#usernamehw\.errorlens\.errorLensWarning {}
/* ──────────────────────────────────────────────────────────── */