程式碼導覽

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 Open in VS Code Open in VS Code Insiders 設定來關閉麵包屑。

麵包屑自訂

麵包屑的外觀可以自訂。如果您有非常長的路徑,或者只對檔案路徑或符號路徑感興趣,您可以使用 breadcrumbs.filePath Open in VS Code Open in VS Code Insiders breadcrumbs.symbolPath Open in VS Code Open in VS Code Insiders 設定。兩者都支援 `on` (開啟)、`off` (關閉) 和 `last` (上次),並定義您看到的檔案路徑或符號路徑的哪個部分。預設情況下,麵包屑會顯示麵包屑左側的檔案和符號圖示,但您可以將 breadcrumbs.icons Open in VS Code Open in VS Code Insiders 設定為 false 以移除圖示。

麵包屑中的符號順序

您可以使用 breadcrumbs.symbolSortOrder Open in VS Code Open in VS Code Insiders 設定來控制麵包屑下拉式選單中符號的排序方式。

允許的值為

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

麵包屑路徑複製

您可以透過在編輯器分頁上按右鍵並選擇 **複製麵包屑路徑** 來複製完整的麵包屑路徑。這會將包含檔案和符號名稱的完整路徑複製到剪貼簿。

您可以使用 breadcrumbs.symbolPathSeparator Open in VS Code Open in VS Code Insiders 設定來設定符號路徑分隔符號。預設值為 `.`。

麵包屑鍵盤導覽

若要與麵包屑互動,請使用 **聚焦麵包屑** 指令或按下 ⇧⌘. (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+Click 跳轉到定義,或使用 Ctrl+Alt+Click 在旁邊開啟定義。

前往類型定義

有些 語言 也支援透過編輯器上下文選單或 **命令選擇區** 執行 **前往類型定義** 指令,來跳轉到符號的類型定義。這會帶您前往符號類型的定義。指令 `editor.action.goToTypeDefinition` 預設未綁定鍵盤快速鍵,但您可以新增自己的自訂 鍵盤繫結

前往實作

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

前往符號

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

Go to Symbol

依名稱開啟符號

有些語言支援使用 ⌘T (Windows、Linux Ctrl+T) 在檔案之間跳轉到符號。輸入您想要導覽的類型第一個字母,無論它包含在哪個檔案中,然後按下 Enter

Open symbol by name

預覽 (Peek)

我們認為沒有什麼比只想快速檢查某件事時,卻必須進行一次大的上下文切換更糟糕的了。這就是為什麼我們支援預覽編輯器。當您執行 **前往參考** 搜尋 (透過 ⇧F12 (Windows、Linux Shift+F12)) 或 **預覽定義** (透過 ⌥F12 (Windows Alt+F12、Linux Ctrl+Shift+F10)) 時,我們會將結果內嵌顯示。

Peek References

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

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

括號配對

只要游標靠近其中一個括號,配對的括號就會被反白顯示。

Bracket Matching

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

括號配對色彩化

透過將 editor.bracketPairColorization.enabled Open in VS Code Open in VS Code Insiders 設定為 `true`,配對的括號也可以色彩化。

Bracket Pair Colorization

所有顏色都可透過佈景主題設定,並且最多可設定六種顏色。

您可以使用 workbench.colorCustomizations Open in VS Code Open in VS Code Insiders 在您的設定中覆寫這些佈景主題提供的顏色。

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

參考資訊

有些語言 (例如 C#) 支援內嵌參考資訊,這些資訊會即時更新。這可讓您快速分析您的編輯所造成的影響,或專案中特定方法或屬性的受歡迎程度。

Reference information

提示: 透過點擊這些註釋,可以直接叫用 **預覽參考** 動作。

提示: 程式碼透鏡 (CodeLens) 中顯示的參考資訊可透過 editor.codeLens Open in VS Code Open in VS Code Insiders 設定開啟或關閉。

重新命名符號

有些語言支援跨檔案重新命名符號。按下 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 Open in VS Code Open in VS Code Insiders 設定來啟用/停用,預設為啟用。需要擴充功能,例如 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.com` 和 `https://*.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.quickOpenPreviousRecentlyUsedEditor` 和 `workbench.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
© . This site is unofficial and not affiliated with Microsoft.