🚀 在 VS Code 中取得

程式碼導覽

Visual Studio Code 具有高效能的程式碼編輯器,結合程式語言服務,為您提供 IDE 的強大功能和文字編輯器的速度。在本主題中,我們將首先描述 VS Code 的語言智慧功能(建議、參數提示、智慧程式碼導覽),然後展示核心文字編輯器的強大功能。

快速檔案導覽

提示: 您可以在輸入 ⌘P (Windows、Linux Ctrl+P) (快速開啟) 時,依名稱開啟任何檔案。

當您探索專案時,「檔案總管」非常適合在檔案之間導覽。但是,當您處理任務時,您會發現自己快速地在同一組檔案之間跳轉。VS Code 提供了兩個強大的命令,可透過易於使用的鍵盤快速鍵在檔案內和跨檔案導覽。

按住 Ctrl 並按下 Tab 以檢視編輯器群組中所有開啟檔案的清單。若要開啟其中一個檔案,請再次使用 Tab 選取您要導覽的檔案,然後放開 Ctrl 以開啟它。

Quick Navigation

或者,您可以使用 ⌃- (Windows Alt+Left、Linux Ctrl+Alt+-)⌃⇧- (Windows Alt+Right、Linux Ctrl+Shift+-) 在檔案和編輯位置之間導覽。如果您在同一個檔案的不同行之間跳轉,這些快速鍵可讓您輕鬆地在這些位置之間導覽。

麵包屑導航

編輯器在其內容上方有一個稱為麵包屑導航的導覽列。它顯示目前位置,並讓您快速地在資料夾、檔案和符號之間導覽。

Breadcrumbs

麵包屑導航始終顯示檔案路徑,並在語言擴充功能的協助下,顯示符號路徑直到游標位置。顯示的符號與大綱檢視和「前往符號」中的符號相同。

在路徑中選取麵包屑導航會顯示一個下拉式選單,其中包含該層級的同層項目,因此您可以快速導覽至其他資料夾和檔案。

breadcrumb folder dropdown

如果目前的檔案類型具有符號的語言支援,您將會看到目前的符號路徑,以及位於相同層級和下方的其他符號的下拉式選單。

breadcrumb symbol dropdown

您可以透過 [檢視] > [顯示麵包屑導航] 切換或使用 breadcrumbs.enabled 設定來關閉麵包屑導航。

麵包屑導航自訂

可以自訂麵包屑導航的外觀。如果您有非常長的路徑,或只對檔案路徑或符號路徑感興趣,您可以使用 breadcrumbs.filePathbreadcrumbs.symbolPath 設定。兩者都支援 onofflast,它們定義您是否看到路徑或看到路徑的哪個部分。依預設,麵包屑導航會在麵包屑導航的左側顯示檔案和符號圖示,但您可以將 breadcrumbs.icons 設定為 false 來移除圖示。

麵包屑導航中的符號順序

您可以使用 breadcrumbs.symbolSortOrder 設定來控制符號在麵包屑導航下拉式選單中的排序方式。

允許的值為

  • position - 檔案中的位置 (預設)
  • name - 字母順序
  • type - 符號類型順序

麵包屑導航鍵盤導覽

若要與麵包屑導航互動,請使用 [焦點麵包屑導航] 命令或按下 ⇧⌘. (Windows、Linux Ctrl+Shift+.)。它將選取最後一個元素並開啟一個下拉式選單,讓您可以導覽至同層檔案或符號。使用 (Windows、Linux Left) (Windows、Linux Right) 鍵盤快速鍵移至目前元素之前或之後的元素。當下拉式選單出現時,開始輸入 - 所有相符的元素都會反白顯示,並且會選取最佳符合項目以進行快速導覽。

您也可以在不使用下拉式選單的情況下與麵包屑導航互動。按下 ⇧⌘; (Windows、Linux Ctrl+Shift+;) 以聚焦最後一個元素,使用 (Windows、Linux Left) (Windows、Linux Right) 進行導覽,並使用 Space 在編輯器中顯示元素。

前往定義

如果語言支援,您可以按下 F12 以前往符號的定義。

如果您按下 Ctrl 並將滑鼠游標懸停在符號上方,將會出現宣告的預覽

Ctrl Hover

提示: 您可以使用 Ctrl+按一下 跳至定義,或使用 Ctrl+Alt+按一下 在側邊開啟定義。

前往型別定義

某些語言也支援透過從編輯器操作功能表或 [命令面板] 執行 [前往型別定義] 命令,跳至符號的型別定義。這會將您帶到符號型別的定義。預設情況下,命令 editor.action.goToTypeDefinition 未繫結至鍵盤快速鍵,但您可以新增自己的自訂鍵盤快速鍵

前往實作

語言也可以支援透過按下 ⌘F12 (Windows、Linux Ctrl+F12) 跳至符號的實作。對於介面,這會顯示該介面的所有實作器,對於抽象方法,這會顯示該方法的所有具體實作。

前往符號

您可以使用 ⇧⌘O (Windows、Linux Ctrl+Shift+O) 在檔案內導覽符號。透過輸入 :,符號將依類別分組。按下 向上向下 並導覽至您想要的位置。

Go to Symbol

依名稱開啟符號

某些語言支援使用 ⌘T (Windows、Linux Ctrl+T) 跳至跨檔案的符號。輸入您想要導覽之型別的第一個字母,無論哪個檔案包含該型別,然後按下 Enter

Open symbol by name

預覽

我們認為最糟糕的事情莫過於當您只想快速檢查某些內容時,卻發生大型內容切換。這就是我們支援預覽編輯器的原因。當您執行 [前往參考] 搜尋 (透過 ⇧F12 (Windows、Linux Shift+F12)) 或 [預覽定義] (透過 ⌥F12 (Windows Alt+F12、Linux Ctrl+Shift+F10)) 時,我們會內嵌結果

Peek References

您可以在預覽編輯器中導覽不同的參考,並直接在那裡進行快速編輯。按一下預覽編輯器檔案名稱或在結果清單中按兩下,將會在外部編輯器中開啟參考。

提示: 此外,如果您按下 Escape 或在預覽編輯器區域中按兩下,預覽視窗將會關閉。您可以使用 editor.stablePeek 設定來停用此行為。

括號配對

當游標靠近配對括號時,配對括號將會反白顯示。

Bracket Matching

提示: 您可以使用 ⇧⌘\ (Windows、Linux Ctrl+Shift+\) 跳至配對括號

括號組顏色化

也可以透過將 editor.bracketPairColorization.enabled 設定為 true 來為配對括號組著色。

Bracket Pair Colorization

所有色彩都是可設定佈景主題的,最多可以設定六種色彩。

您可以使用 workbench.colorCustomizations 在您的設定中覆寫這些佈景主題貢獻的色彩

"workbench.colorCustomizations": {
    "editorBracketHighlight.foreground1": "#FFD700",
    "editorBracketHighlight.foreground2": "#DA70D6",
    "editorBracketHighlight.foreground3": "#179fff",
},

參考資訊

某些語言 (例如 C#) 支援內嵌參考資訊,該資訊會即時更新。這可讓您快速分析您的編輯或特定方法或屬性在整個專案中的影響或普及程度

Reference information

提示: 直接按一下這些註解來叫用 [預覽參考] 動作。

提示: 可以透過 editor.codeLens 設定來開啟或關閉 CodeLens 中顯示的參考資訊。

重新命名符號

某些語言支援跨檔案重新命名符號。按下 F2,然後輸入新的所需名稱並按下 Enter。符號的所有用法都將會跨檔案重新命名。

Rename

錯誤 & 警告

警告或錯誤可以透過已設定的工作、透過豐富的語言服務或透過持續在背景分析程式碼的程式碼靜態分析器產生。由於我們喜歡沒有錯誤的程式碼,因此警告和錯誤會顯示在多個位置

  • 在狀態列中,有所有錯誤和警告計數的摘要。
  • 您可以按一下摘要或按下 ⇧⌘M (Windows、Linux Ctrl+Shift+M) 以顯示 [問題] 面板,其中包含所有目前錯誤的清單。
  • 如果您開啟具有錯誤或警告的檔案,它們將會與文字內嵌呈現,並顯示在概觀尺規中。

errors in problems panel

提示: 若要迴圈瀏覽目前檔案中的錯誤或警告,您可以按下 ⌥F8 (Windows、Linux Alt+F8)⇧⌥F8 (Windows、Linux Shift+Alt+F8),這將會顯示一個內嵌區域,詳細說明問題和可能的程式碼動作 (如果可用)

Errors and Warnings Inline

程式碼動作

警告和錯誤可以提供程式碼動作 (也稱為快速修正) 以協助修正問題。這些將在編輯器的左邊界中顯示為燈泡。按一下燈泡將會顯示程式碼動作選項或執行動作。

內嵌提示

某些語言提供內嵌提示:即關於內嵌呈現之原始碼的其他資訊。這通常用於顯示推斷的型別。下面的範例顯示內嵌提示,這些提示顯示 JavaScript 變數和函式傳回型別的推斷型別。

Inlay hints for inferred types in TypeScript

可以使用 editor.inlayHints.enabled 設定來啟用/停用內嵌提示,預設為啟用。需要擴充功能 (例如 TypeScript 或 Rust) 才能提供實際的內嵌提示資訊。

為了保護您的安全,VS Code 會在從編輯器開啟輸出網站連結之前顯示提示。

Outgoing link prompt

您可以繼續前往瀏覽器中的外部網站,或選擇複製連結或取消要求。如果您選擇 [設定信任的網域],則下拉式選單可讓您信任確切的 URL、信任 URL 網域和子網域,或信任所有網域以停用輸出連結保護。

Configure Trusted Domains dropdown

從 [命令面板] 隨時可用的 [管理信任的網域] 選項會顯示 [信任的網域] JSON 檔案,您可以在其中新增、移除或修改信任的網域。

// You can use the "Manage Trusted Domains" command to open this file.
// Save this file to apply the trusted domains rules.
[
  "*.twitter.com"
]

[信任的網域] JSON 檔案也具有註解,其中包含支援的網域格式範例,以及預設信任的網域清單,例如 https://*.visualstudio.comhttps://*.microsoft.com

後續步驟

現在您已了解編輯器如何運作,現在是時候嘗試其他一些功能了...

常見問題

如何自動選取 [快速開啟] 中的第二個項目而不是第一個?

使用命令 workbench.action.quickOpenPreviousEditor,您可以在 [快速開啟] 中自動選取第二個項目。如果您想要從清單中選取上一個項目,而無需叫用另一個鍵盤快速鍵,這會很有用

[
  {
    "key": "ctrl+p",
    "command": "workbench.action.quickOpenPreviousEditor"
  },
  {
    "key": "ctrl+p",
    "command": "-workbench.action.quickOpen"
  }
]

如何設定 Ctrl+Tab 以在所有群組的所有編輯器之間導覽

依預設,Ctrl+Tab 在相同編輯器群組的編輯器之間導覽。如果您想要在所有群組的所有已開啟編輯器之間導覽,您可以為 workbench.action.quickOpenPreviousRecentlyUsedEditorworkbench.action.quickOpenLeastRecentlyUsedEditor 命令建立鍵盤快速鍵

[
  {
    "key": "ctrl+tab",
    "command": "workbench.action.quickOpenPreviousRecentlyUsedEditor",
    "when": "!inEditorsPicker"
  },
  {
    "key": "ctrl+shift+tab",
    "command": "workbench.action.quickOpenLeastRecentlyUsedEditor",
    "when": "!inEditorsPicker"
  }
]

如何在沒有選取器的情況下在最近使用的編輯器之間導覽

以下是您可以使用的命令清單,以便在沒有開啟選取器的情況下在編輯器中導覽

按鍵 命令 命令 ID
開啟下一個最近使用的編輯器 workbench.action.openNextRecentlyUsedEditor
開啟上一個最近使用的編輯器 workbench.action.openPreviousRecentlyUsedEditor
開啟群組中下一個最近使用的編輯器 workbench.action.openNextRecentlyUsedEditorInGroup
開啟群組中上一個最近使用的編輯器 workbench.action.openPreviousRecentlyUsedEditorInGroup