Skip to content
| Marketplace
Sign in
Visual Studio Code>Linters>Inline BeaconNew to Visual Studio Code? Get it now.
Inline Beacon

Inline Beacon

workjerry

| (0) | Free
在程式碼行尾直接顯示診斷訊息,並高亮與清除尾端空白;狀態列一眼看到錯誤、警告與尾端空白的數量。
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Inline Beacon

在程式碼行尾直接顯示診斷訊息,並高亮與清除尾端空白;狀態列一眼看到錯誤、警告與尾端空白的數量。

原始碼與問題回報:https://github.com/lazyjerry/code-beacon-ext

功能

診斷行內訊息

  • 行尾顯示問題:錯誤、警告、資訊直接顯示在該行行尾(提示預設不顯示,可用 codeBeacon.diagnosticLevels 打開),不必 hover 或開「問題」面板。
  • 訊息樣板:預設 $severity $message,前面是嚴重度符號(✖ ▲ ● ◇,可改),後面是訊息;另有 $count(同一行問題數,超過一個才顯示)、$source、$code 可用。
  • 底色:整行、只有訊息、或不上色三選一;也可另外標出問題的實際範圍。
  • 跟隨游標:可只顯示游標所在行、除了游標行以外、或離游標最近的一則。
  • 對齊欄位:訊息可從固定欄位開始或結束,長行自動退回最小間距。
  • gutter 圖示:行號旁顯示嚴重度圖示,方塊、圓形、字母、emoji 四種樣式,顏色與 emoji 可自訂。
  • 存檔模式:可改成只在存檔後顯示幾百毫秒,平常不干擾。
  • 排除:依來源(eslint、eslint(no-unused-vars))或訊息 regex 隱藏不想看的問題。

尾端空白

  • 即時高亮:編輯時把行尾的空格與 tab 標成警告黃(顏色與 regex 可改)。
  • 預設僅顯示不清除:不會在存檔時偷偷改檔案。想要存檔自動清除,把 codeBeacon.trailingSpacesHighlightOnly 關掉。
  • 只清修改過的行:「清除尾端空白」預設只處理自開檔或上次存檔以來改過的行,不會把整份檔案的 diff 弄髒;要整份清除用「清除尾端空白(整份檔案)」。
  • 整行空白的行:預設一起清;codeBeacon.trimIncludeEmptyLines 關掉可保留。
  • 游標所在行:預設也高亮;打字時嫌閃可關掉。

狀態列

一個項目顯示 $(error) 錯誤數 $(warning) 警告數 $(info) 資訊數 $(whitespace) 含尾端空白的行數。有錯誤時套錯誤底色、只有警告時套警告底色,點擊開「問題」面板。診斷可選算目前編輯器或所有開啟的文件;尾端空白一律只算目前編輯器。

共用排除

codeBeacon.excludePatterns(glob)、codeBeacon.excludeLanguages(語言識別碼)、codeBeacon.excludeSchemes(document scheme)三條同時作用在診斷與尾端空白。預設跳過 output;加上 untitled 可跳過未存檔的新檔案。

中英雙語

設定頁的說明、指令名稱、訊息都隨 VS Code 的顯示語言切換(繁體中文、英文;其他語言顯示英文)。

指令

從命令面板(Cmd+Shift+P)輸入 Inline Beacon 找到:

指令 說明
切換功能 Quick Pick 選擇要開關的項目:全部、診斷、尾端空白、錯誤、警告、資訊、提示。寫入使用者設定。
搜尋游標所在行的問題 用 codeBeacon.searchForProblemQuery 的網址搜尋該行最嚴重的問題訊息。
複製游標所在行的問題訊息 該行所有問題的訊息,一行一則,寫進剪貼簿。
清除尾端空白 遵守 trimModifiedLinesOnly 與 trimIncludeEmptyLines。
清除尾端空白(整份檔案) 無視 trimModifiedLinesOnly,整份清除;仍遵守 trimIncludeEmptyLines。

快捷鍵

預設不綁任何快捷鍵,也不進右鍵選單。要綁的話在 Keyboard Shortcuts 搜尋 codeBeacon,或在 keybindings.json 加:

[
  { "key": "cmd+alt+w", "command": "codeBeacon.trimTrailingSpaces", "when": "editorTextFocus" },
  { "key": "cmd+alt+shift+w", "command": "codeBeacon.trimTrailingSpacesAll", "when": "editorTextFocus" },
  { "key": "cmd+alt+b", "command": "codeBeacon.toggle" }
]

設定

全部 41 條,前綴 codeBeacon.。

共用

設定 用途 型別 預設
enabled 總開關 boolean true
diagnosticsEnabled 診斷行內訊息與底色 boolean true
trailingSpacesEnabled 尾端空白即時高亮(關掉仍可用指令清除) boolean true
excludePatterns 以絕對路徑比對的 glob,符合的檔案兩個功能都不處理 string[] []
excludeLanguages 這些語言識別碼不處理(區分大小寫) string[] []
excludeSchemes 這些 document scheme 不處理;git、vscode-scm 一律跳過 string[] ["output"]
delay 變更後等幾毫秒才重繪(debounce),兩個功能共用 integer 500
statusBarEnabled 顯示狀態列項目 boolean true
statusBarAlignment 狀態列項目靠左或靠右 left | right "left"
statusBarPriority 狀態列排序權重,越大越靠左 integer -9000
statusBarScope 診斷計數範圍:所有文件或目前編輯器 all | activeEditor "activeEditor"

診斷

設定 用途 型別 預設
diagnosticLevels 要顯示與計數的嚴重度 (error | warning | info | hint)[] ["error","warning","info"]
followCursor 相對游標要顯示哪些問題 allLines | allLinesExceptActive | activeLine | closestProblem "allLines"
messageTemplate 行內訊息樣板:$message、$count、$severity、$source、$code;留空只留底色 string "$severity $message"
messageMaxChars 訊息超過此字數截斷,0 不限 integer 500
maxInlineMessages 每份文件最多幾條行內訊息,0 不限 integer 1000
messageBackgroundMode 底色畫在整行、只有訊息、或不畫 line | message | none "line"
severityText $severity 展開的符號,順序錯誤、警告、資訊、提示 string[4] ["✖","▲","●","◇"]
margin 程式碼與訊息之間的 CSS 間距 string "4ch"
fontSize 訊息的 CSS 字級,空字串跟隨編輯器 string ""
fontWeight 訊息字重 100…900 | normal | bold "normal"
fontStyleItalic 訊息用斜體 boolean false
problemRangeDecorationEnabled 另外標出問題的實際範圍 boolean false
excludeByMessage 訊息符合任一 regex 的問題不顯示 string[] []
excludeBySource 要隱藏的來源:eslint 或 eslint(規則) string[] []
searchForProblemQuery 搜尋指令的網址,$message 換成編碼後的訊息;只開 http/https;只能設在使用者層級 string "https://duckduckgo.com/?q=$message"
alignMessage 對齊欄位:start、end、minimumMargin、padding [左, 右]、useFixedPosition object {start:0, end:0, minimumMargin:4, padding:[0,0], useFixedPosition:true}
gutterIconsEnabled 行號旁顯示嚴重度圖示(不受 followCursor 影響) boolean false
gutterIconSet 圖示樣式 default | circle | letter | emoji "default"
gutterEmoji 樣式為 emoji 時各嚴重度的符號 object {error:"🔴", warning:"🟠", info:"🔵", hint:"🟢"}
gutterIconColors 方塊、圓形、字母樣式的顏色 object {error:"#e45454", warning:"#ff942f", info:"#00b7e4", hint:"#2faf64"}
onSave 只在存檔時更新診斷裝飾 boolean false
onSaveTimeout 存檔模式下裝飾顯示幾毫秒 integer 500

尾端空白

設定 用途 型別 預設
trailingSpacesRegexp 判定行尾空白的 regex string "[ \\t]+"
trailingSpacesHighlightCurrentLine 游標所在行也高亮 boolean true
trimIncludeEmptyLines 清除時整行空白的行也清 boolean true
trimModifiedLinesOnly 只清自開檔或上次存檔以來改過的行 boolean true
trailingSpacesHighlightOnly 僅顯示不清除;關掉後存檔自動清除 boolean true
trimStatusBarMessage 清除後在狀態列短暫顯示結果 boolean true
trailingSpacesBackgroundColor 高亮底色(CSS 色值) string "#cca7004d"
trailingSpacesBorderColor 高亮邊框色(CSS 色值) string "#cca70026"

顏色

診斷的顏色是 theme color,在 workbench.colorCustomizations 覆寫。四種嚴重度(error、warning、info、hint)各有四個:

id 用途 預設(深色/淺色)
codeBeacon.<嚴重度>Background 整行底色 error #e454541b/#e4545420、warning #ff942f1b/#ff942f20、info #00b7e420、hint #17a2a220
codeBeacon.<嚴重度>MessageBackground 只有訊息模式的底色 error #e4545419、warning #ff942f19、info #00b7e419、hint #17a2a219
codeBeacon.<嚴重度>RangeBackground 問題實際範圍的底色 同上
codeBeacon.<嚴重度>Foreground 訊息文字與符號的顏色 error #ff6464/#e45454、warning #fa973a/#ff942f、info #00b7e4、hint #2faf64

例:

"workbench.colorCustomizations": {
  "codeBeacon.errorForeground": "#ff8080",
  "codeBeacon.warningBackground": "#ff942f10"
}

尾端空白的顏色是一般設定(trailingSpacesBackgroundColor、trailingSpacesBorderColor),不是 theme color。

限制與已知差異

  • 存檔自動清除與內建 files.trimTrailingWhitespace 的差別:內建的會清整份檔案的所有行;本延伸模組的(trailingSpacesHighlightOnly: false)遵守 trimModifiedLinesOnly、trimIncludeEmptyLines 與自訂 regex。兩者同時開會各清各的,建議只留一個。
  • 「修改過的行」以編輯事件計算,開檔或存檔後歸零。用外部工具改了檔案再回到 VS Code,那些變更不算修改過的行。
  • 狀態列的尾端空白計數只算目前編輯器,即使 statusBarScope 是 all。
  • 受限模式(Restricted Mode):searchForProblemQuery、trailingSpacesRegexp、excludeByMessage 不接受工作區設定,改用使用者設定的值。
  • diff 檢視左側(git: scheme)與 SCM 輸入框不裝飾。
  • problems.visibility 關掉時,診斷行內訊息一併隱藏。

開發

見 CONTRIBUTING.md。

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
  • Your Privacy Choices
  • Consumer Health Privacy
© 2026 Microsoft