重構

原始碼重構可透過重組程式碼來改善專案的品質和可維護性，同時不修改執行階段行為。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：永遠不會在儲存時觸發「程式碼動作」

重構動作

提取方法

選取您想要提取的原始碼，然後選取 gutter 中的燈泡或按下 (⌘. (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 進行偵錯。

常見問題

為什麼我的程式碼中有錯誤時看不到燈泡？

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