重構

原始碼重構可以透過重構程式碼來提高專案的質量和可維護性，同時不改變執行時行為。Visual Studio Code 支援重構操作（重構），例如 提取方法和 提取變數，從而在編輯器內改進您的程式碼庫。

例如，一種常用的重構方法是為了避免程式碼重複（這是一個維護難題），即 提取方法重構，您選擇原始碼並將其提取到自己的共享方法中，以便在其他地方重用該程式碼。

重構由語言服務提供。VS Code 透過 TypeScript 語言服務內建支援 TypeScript 和 JavaScript 的重構。對其他程式語言的重構支援透過 VS Code 的 擴充套件 來實現，這些擴充套件貢獻了語言服務。

重構的使用者介面元素和 VS Code 命令在不同語言之間是相同的。本文將以 TypeScript 語言服務為例，演示 VS Code 中的重構支援。

程式碼操作 = 快速修復和重構

在 VS Code 中，程式碼操作可以同時提供針對檢測到的問題（用紅色波浪線突出顯示）的重構和快速修復。當游標位於波浪線或選定文字區域上時，VS Code 會在編輯器中顯示一個燈泡圖示，表示有可用的程式碼操作。如果您選擇程式碼操作燈泡或使用 快速修復 命令 ⌘. (Windows, Linux Ctrl+.)，則會顯示快速修復和重構控制元件。

如果您希望只看到重構而不顯示快速修復，那麼您可以使用 重構 命令（⌃⇧R (Windows, Linux Ctrl+Shift+R)）。

注意：您可以使用 `editor.lightbulb.enable` 設定完全停用編輯器中的程式碼操作燈泡。您仍然可以透過 快速修復 命令和 ⌘. (Windows, Linux Ctrl+.) 鍵盤快捷方式開啟快速修復。

儲存時程式碼操作

使用 editor.codeActionsOnSave 設定，您可以配置一組程式碼操作，在儲存檔案時自動應用這些程式碼操作，例如整理匯入。根據您的工作區檔案和活動擴充套件，IntelliSense 會提供可用程式碼操作的列表。

您可以為 editor.codeActionsOnSave 配置一個或多個程式碼操作。然後按照列表中的順序執行程式碼操作。

以下示例顯示瞭如何配置多個儲存時的程式碼操作

// On explicit save, run sortImports source action. On auto save (window or focus change), run organizeImports source action.
"editor.codeActionsOnSave": {
    "source.organizeImports": "always",
    "source.sortImports": "explicit",
},

以下值支援每個程式碼操作

• explicit（預設）：在顯式儲存時觸發程式碼操作
• always：在顯式儲存和視窗或焦點更改的自動儲存時觸發程式碼操作
• never：儲存時從不觸發程式碼操作

重構操作

提取方法

選擇您想要提取的原始碼，然後選擇裝訂線上的燈泡或按（⌘. (Windows, Linux Ctrl+.)）以檢視可用的重構。原始碼片段可以提取到一個新方法中，或者提取到不同範圍的新函式中。在提取重構過程中，系統會提示您提供一個有意義的名稱。

提取變數

TypeScript 語言服務提供了 **提取到 const** 重構，用於為當前選定的表示式建立一個新的區域性變數。

在使用類時，您還可以將一個值提取到一個新的屬性中。

重新命名符號

重新命名是與重構原始碼相關的常見操作，VS Code 有一個單獨的 **重新命名符號** 命令（F2）。某些語言支援跨檔案重新命名符號。按 F2，輸入所需的新名稱，然後按 Enter。該符號在所有檔案中的所有例項都將被重新命名。

重構預覽

當您應用重構時，更改將直接實施到您的程式碼中。在 **重構預覽** 面板中，您可以預覽由重構操作應用的更改。

要開啟 **重構預覽** 面板，請開啟程式碼操作控制元件，將滑鼠懸停在重構上，然後按 ⌘Enter (Windows, Linux Ctrl+Enter)。

您可以選擇 **重構預覽** 面板中的任何更改，以檢視重構操作導致的更改的差異檢視。

使用 **接受** 或 **放棄** 控制元件來應用或取消提議的重構更改。

可選地，您可以透過在重構預覽面板中取消選擇某些提議的更改來部分應用重構更改。

程式碼操作的鍵盤快捷方式

`editor.action.codeAction` 命令允許您為特定的程式碼操作配置鍵盤快捷方式。例如，此鍵盤快捷方式會觸發 **提取函式** 重構程式碼操作。

{
  "key": "ctrl+shift+r ctrl+e",
  "command": "editor.action.codeAction",
  "args": {
    "kind": "refactor.extract.function"
  }
}

程式碼操作的種類由擴充套件使用增強的 `CodeActionProvider` API 指定。種類是分層的，因此 `"kind": "refactor"` 顯示所有重構程式碼操作，而 `"kind": "refactor.extract.function"` 只顯示 **提取函式** 重構。

使用上述鍵盤快捷方式，如果只有一個 ` "refactor.extract.function"` 程式碼操作可用，它將被自動應用。如果存在多個 **提取函式** 程式碼操作，VS Code 會彈出一個上下文選單供您選擇。

您還可以使用 `apply` 引數來控制程式碼操作如何以及何時自動應用。

{
  "key": "ctrl+shift+r ctrl+e",
  "command": "editor.action.codeAction",
  "args": {
    "kind": "refactor.extract.function",
    "apply": "first"
  }
}

`apply` 的有效值

• first - 始終自動應用第一個可用的程式碼操作。
• ifSingle - （預設）如果只有一個程式碼操作可用，則自動應用它。否則，顯示上下文選單。
• never - 始終顯示程式碼操作上下文選單，即使只有一個程式碼操作可用。

當代碼操作鍵盤快捷方式配置為 `"preferred": true` 時，將只顯示首選的快速修復和重構。首選的快速修復會解決根本錯誤，而首選的重構是最常見的重構選擇。例如，雖然可能存在多個 `refactor.extract.constant` 重構，每個重構都提取到檔案中的不同範圍，但首選的 `refactor.extract.constant` 重構是將程式碼提取到區域性變數的那個。

此鍵盤快捷方式使用 `"preferred": true` 來建立一個重構，該重構始終嘗試將選定的原始碼提取到本地範圍的常量中。

{
  "key": "shift+ctrl+e",
  "command": "editor.action.codeAction",
  "args": {
    "kind": "refactor.extract.constant",
    "preferred": true,
    "apply": "ifSingle"
  }
}

提供重構的擴充套件

您可以透過檢視 VS Code Marketplace 來查詢支援重構的擴充套件。您可以轉到“擴充套件”檢視（⇧⌘X (Windows, Linux Ctrl+Shift+X)），然後在搜尋框中鍵入“refactor”。然後，您可以按安裝次數或評分進行排序，以檢視哪些擴充套件很受歡迎。

提示：上面顯示的擴充套件是動態查詢的。選擇上面的擴充套件圖塊以閱讀說明和評論，以決定哪個擴充套件最適合您。

後續步驟

• 入門影片 - 程式碼編輯 - 觀看有關程式碼編輯功能的入門影片。
• 程式碼導航 - VS Code 讓您能夠快速瀏覽原始碼。
• 除錯 - 瞭解 VS Code 的除錯功能。

常見問題

為什麼我的程式碼有錯誤但看不到任何燈泡？

燈泡（程式碼操作）僅在游標位於顯示錯誤的程式碼文字上方時顯示。將滑鼠懸停在文字上會顯示錯誤描述，但您需要將游標移動或選擇文字才能看到用於快速修復和重構的燈泡。