重構

原始碼重構可以透過重組您的程式碼，同時不修改執行階段行為，來改善專案的品質和可維護性。Visual Studio Code 支援重構操作 (重構)，例如 提取方法 和 提取變數，以從編輯器內部改善您的程式碼庫。

例如，用於避免重複程式碼 (維護上的麻煩) 的常見重構是 提取方法 重構，您可以在其中選取原始碼並將其提取到自己的共用方法中，以便在其他地方重複使用該程式碼。

重構由語言服務提供。VS Code 透過 TypeScript 語言服務，內建支援 TypeScript 和 JavaScript 重構。其他程式語言的重構支援透過 VS Code 擴充功能啟用，這些擴充功能貢獻語言服務。

不同語言的重構 UI 元素和 VS Code 命令都相同。本文示範 VS Code 中使用 TypeScript 語言服務的重構支援。

程式碼動作 = 快速修正與重構

在 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 市集 中尋找來找到支援重構的擴充功能。您可以前往「擴充功能」檢視 (⇧⌘X (Windows、Linux Ctrl+Shift+X))，並在搜尋方塊中輸入「refactor」。然後，您可以依安裝計數或評分排序，以查看哪些擴充功能受歡迎。

提示：上方顯示的擴充功能是動態查詢的。選取上方的擴充功能磚以閱讀描述和評論，以決定哪個擴充功能最適合您。

後續步驟

• 簡介影片 - 程式碼編輯 - 觀看程式碼編輯功能的簡介影片。
• 程式碼導覽 - VS Code 可讓您在原始碼中快速移動。
• 偵錯 - 了解如何使用 VS Code 進行偵錯。

常見問題

為什麼當我的程式碼中出現錯誤時，我看不到任何燈泡？

燈泡 (程式碼動作) 僅在游標位於顯示錯誤的文字上方時才會顯示。將滑鼠游標停留在文字上方會顯示錯誤描述，但您需要移動游標或選取文字才能看到「快速修正」和重構的燈泡。