Real talk: this is one of the most annoying extensions out there. Unless you are learning to code, I recommend keeping the inline message disabled by default and binding a hotkey to toggle it:
// keybindings.json
{
"key": "ctrl+u",
"command": "errorLens.toggleInlineMessage",
// ^ Toggles global setting `errorLens.messageEnabled`
},- Exclude problems (in workspace, by source, by code, by message)
- Show fewer decorations (render decoration only on the active line)
- Delay showing decorations (delay ms / on document save)
- Transform problem message (make it shorter maybe)
- Configure other settings or colors to make it less distracting
"errorLens.exclude": [
"Missing semicolon",
"Newline required at end of file but not found",
"More than 1 blank line not allowed",
],
// OR
"errorLens.excludeBySource": [
"eslint(padded-blocks)",
],"errorLens.followCursor": "activeLine",
// OR
"errorLens.followCursor": "closestProblem","errorLens.delay": 1500,
// OR
"errorLens.onSave": true,
"errorLens.replace": [
{
"matcher": "is declared but its value is never read",
"message": "ಠ╭╮ಠ",
},
], |
|
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
Disable decorations or features when VSCode setting problems.visibility ("Controls whether the problems are visible throughout the editor and workbench") is disabled.
Disable decorations when file has merge conflict symbols <<<<<<< or ======= or >>>>>>>.
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" |
|
Whether to use bold or not font weight for messages.
| "normal" | "bold" |
|---|---|
|
|
|
Whether to use italic font style or not for messages.
| false | true |
|---|---|
|
|
|
Change font size of inline message. Not supported natively by VSCode. Mostly useful to make message smaller, not bigger. May break errorLens.alignMessage.
| "" |
|
|---|---|
| "12px" |
|
Extra space between the end of the line (end of text) and the inline message.
| "4ch" | "0" | "100px" |
|---|---|---|
|
|
|
|
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": [
"1px solid",
"1px dotted",
"1px dashed",
"1px solid #00000040",
], |
|
Add space around the inline message. Only visible when errorLens.messageBackgroundMode is set to message.
| "0" | "2px 0.5ch" |
|---|---|
|
|
Round corners for inline message. Only visible when errorLens.messageBackgroundMode is set to message.
| "0.3em" | "0" | "50%" | "10px 30px 10px 30px" |
|---|---|---|---|
|
|
|
|
|
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"] |
|---|---|---|
|
|
|
|
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)", |
|
|
| 500 |
|
|---|---|
| 50 |
|
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: ",
"",
"",
], |
|
|
|
Controls visibility of inline message (including background highlighting). Doesn't include gutter icons.
| true | false |
|---|---|
|
|
| "line" | "message" | "none" |
|---|---|---|
|
|
|
|
VSCode now supports natively highlighting problem ranges even without this exntension (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",
},
}, |
|
Controls which parts of hover are enabled (for the text editor; Doesn't affect status bar message hover).
messageEnabled- Shows problem message.sourceCodeEnabledShows prblemsource&codeand buttons to copy them to the clipboardbuttonsEnabled- Show buttons likeExclude,Open Definition,Search...
Show icons for Errors & Warnings in status bar similar to native ones, but with the ability to change color / background color.
|
|
Move status bar icons right/left.
Choose alignment of the status bar icons left/right side of the viewport.
Choose what to include in counters for problems (status bar icons).
When enabled - highlight status bar with background colors. Only 2 VSCode colors allowed (statusBarItem.errorBackground & statusBarItem.warningBackground).
Choose what happens to status bar icons when there are no errors - hide or remove background color.
Show problem message in Status Bar.
|
|
|
|
Show problem message in Status Bar.
Choose which diagnostic to use for status bar message:
closestProblem- Closest to the cursor diagnosticclosestSeverity- 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 cursoractiveCursor- Similar toactiveLinebut follows the cursor movement inside the line
Move status bar icons right/left.
Choose alignment of the status bar message left/right side of the viewport.
Uses colors errorLens.statusBarErrorForeground, errorLens.statusBarWarningForeground, errorLens.statusBarInfoForeground, errorLens.statusBarHintForeground.
| false |
|
|---|---|
| true |
|
────────────────────────────────────────────────────────────
Command that executes on click for Status Bar.
Almost the same as errorLens.messageTemplate but instead affects status bar message.
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": "(。_。)",
},
], |
|
Exclude diagnostics by message. Uses strings to create RegExp with iu flags.
Exclude diagnostics by source or source+code pair.
Exclude files by using glob pattern (VSCode flavor. May have differences like Glob matching should be case insensitive Issue#10633). Example [\"**/*.{ts,js}\"].
Exclude the entire workspace from highlighting problems. Related Command: errorlens.toggleWorkspace .
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"
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.
Pick query to open in default browser when searching for problem with errorLens.searchForProblem command.
Which problem to select (closest / active line) when executing errorLens.selectProblem command.
closestProblem, - Show closest to the cursor diagnosticclosestSeverity- 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.
Override colors when on of the "light" themes is used. Only for colors that are specified in "settings", not in "colors".
Wait this amount (in milliseconds) before showing decorations.
new- Old/stale problems should disappear immediately while new problems should respect errorLens.delayold- Buggy/Overcomplicated old implementationdebounce- Simply usedebounce()fromLodashlibrary. Old/fixed problems also wait errorLens.delay ms before being hidden.
When enabled - updates decorations only on document save (manual, not auto save).
Wait this much (ms) before showing decorations after the document save.
Update decorations immediately or not when switching focus from one Text Editor to another.
Whether or not to show decorations on diff editor.
| false |
|
|---|---|
| true |
|
Highlight only closest to the cursor problem:
| "allLines" |
|
|---|---|
| "activeLine" |
|
| "closestProblem" |
|
| "allLinesExceptActive" |
|
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 |
|
Whether to show gutter icons or not.
| false | true |
|---|---|
|
|
|
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, |
|
|
|
Change size of gutter icons:
| "100%" | "70%" | "150%" |
|---|---|---|
|
|
|
|
| "default" | "circle" |
|---|---|
|
|
|
| "squareRounded" | "letter" |
|
|
|
| "emoji" | |
|
|
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": ":(",
}, |
|
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", |
|
Same as errorLens.errorGutterIconPath
Same as errorLens.errorGutterIconPath
Same as errorLens.errorGutterIconPath
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", |
|
|
Same as errorLens.errorGutterIconPath
Same as errorLens.errorGutterIconPath
Same as errorLens.errorGutterIconPath
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.
When errorLens.removeLinebreaks is enabled => replaced linebreaks \n with the new symbol that can be represented inline (⏎ by default).
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 |
|
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",
},
}, |
|
|
"errorLens.decorations": {
"errorMessage": {
"textDecoration": ";border:1.2px dashed #e4545470;text-shadow:1px 1px 2px #e4545470;border-radius:0.3em;padding:0 0.5ch;",
},
}, |
|
|
When enabled - will not show any decorations in files with the file scheme untitled (newly created unsaved files).
When enabled - will not show any decorations on Dirty (modified) files.
Show messages as insets between the lines.
Enforce minimum and maximum length of code lens messages.
Almost the same as errorLens.messageTemplate, but for the Code Lens feature.
Code Lens is clickable. This setting configures what happens when you click on Code Lens message:
none=> does nothingshowProblemsView=> Open VSCode built-inProblemsview (runsworkbench.actions.view.problems)showQuickFix=> Open Quick Fix menu (runseditor.action.quickFix)searchForProblem=> Search for problem message in your default browser (runserrorLens.searchForProblem)
EXPERIMENTAL. Very far away to being done. There's no api to implement this properly.