重構

原始碼重構可以透過重組程式碼來提升專案的品質與維護性，同時不改變執行階段的行為。Visual Studio Code 支援多種重構操作（重構），例如擷取方法 (Extract Method) 與擷取變數 (Extract Variable)，讓您直接在編輯器中優化您的程式碼庫。

例如，一種常用於避免程式碼重複（這是維護上的頭痛問題）的重構方式是擷取方法 (Extract Method) 重構。您可以選取原始碼並將其提取至獨立的共享方法中，以便在其他地方重複使用這些程式碼。

重構功能由語言服務提供。VS Code 透過 TypeScript 語言服務內建支援 TypeScript 與 JavaScript 的重構。其他程式語言的重構支援則透過提供語言服務的 VS Code 擴充功能來啟用。

不同語言在 VS Code 中的重構 UI 元素與命令都是相同的。本文將以 TypeScript 語言服務為例，示範 VS Code 的重構支援。

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

在 VS Code 中，程式碼動作 (Code Actions) 可同時提供重構功能以及針對偵測到問題（以紅色波浪線標示）的「快速修正」。當游標位於波浪線或選取的文字區域上時，VS Code 會在編輯器中顯示燈泡圖示，以表示有可用的程式碼動作。若您選取該程式碼動作燈泡，或使用快速修正 (Quick Fix) 命令 ⌘. (Windows, Linux Ctrl+.)，就會顯示快速修正與重構控制項。

如果您偏好只檢視重構而不顯示快速修正，可以使用重構 (Refactor) 命令 (⌃⇧R (Windows, Linux Ctrl+Shift+R))。

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

儲存時執行程式碼動作

透過 editor.codeActionsOnSave 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定，您可以設定一組在儲存檔案時自動套用的程式碼動作，例如整理匯入項目 (organize imports)。IntelliSense 會根據您的工作區檔案與已啟用的擴充功能，提供可用的程式碼動作清單。

您可以為 editor.codeActionsOnSave 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定一個或多個程式碼動作。這些程式碼動作將會依照其列出的順序執行。

以下範例展示如何設定多個儲存時執行的程式碼動作

// 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：永遠不在儲存時觸發程式碼動作

重構動作

擷取方法 (Extract Method)

選取您要擷取的原始碼，然後選擇裝訂邊 (gutter) 中的燈泡，或按下 (⌘. (Windows, Linux Ctrl+.)) 以查看可用的重構功能。原始碼片段可以被擷取為新方法，或在不同的範圍中擷取為新函式。在擷取重構期間，系統會提示您提供一個有意義的名稱。

擷取變數 (Extract Variable)

TypeScript 語言服務提供擷取為常數 (Extract to const) 重構功能，可為目前選取的運算式建立一個新的區域變數

處理類別時，您也可以將值擷取為新的屬性。

重新命名符號 (Rename symbol)

重新命名是重構原始碼時常見的操作，VS Code 擁有獨立的重新命名符號 (Rename Symbol) 命令 (F2)。某些語言支援跨檔案重新命名符號。請按下 F2，輸入所需的新名稱，然後按 Enter。該符號在所有檔案中的所有執行個體都將被重新命名。

重構預覽

當您套用重構時，變更會直接實作到您的程式碼中。在重構預覽 (Refactor Preview) 面板中，您可以預覽重構操作將要套用的變更。

若要開啟重構預覽面板，請開啟程式碼動作控制項，將滑鼠游標移至重構選項上方，然後按下 ⌘Enter (Windows, Linux Ctrl+Enter)。

您可以選取重構預覽面板中的任何變更，以檢視重構操作所導致變更的差異比對 (diff view)。

使用接受 (Accept) 或捨棄 (Discard) 控制項來套用或取消建議的重構變更。

您可以選擇性地透過取消勾選重構預覽面板中某些建議的變更，來進行部分套用。

程式碼動作的鍵盤快速鍵

editor.action.codeAction 命令可讓您為特定的程式碼動作設定鍵盤快速鍵。例如，此鍵盤快速鍵會觸發擷取函式 (Extract function) 的重構程式碼動作

{
  "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 中進行偵錯。

常見問題

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

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