🚀 在 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

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

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

重新命名符號

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

Rename

錯誤與警告

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

  • 在狀態列中,有所有錯誤和警告計數的摘要。
  • 您可以按一下摘要或按下 ⇧⌘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"
  }
]

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

以下是您可以用來在編輯器中導覽而不開啟選取器的命令清單

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