參加你附近的 ,瞭解 VS Code 中的 AI 輔助開發。

程式碼導航

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+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

速覽

我們認為,當您只想快速檢查某些內容時,沒有什麼比大的上下文切換更糟糕的了。這就是我們支援速覽編輯器的原因。當您執行轉到引用搜尋(透過 ⇧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

錯誤和警告

警告或錯誤可以透過配置的任務、豐富的語言服務或在後臺持續分析程式碼的 linter 生成。由於我們熱愛無 bug 的程式碼,警告和錯誤會出現在多個地方。

  • 在狀態列中,有所有錯誤和警告數量的摘要。
  • 您可以點選該摘要或按 ⇧⌘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