重構

原始碼重構可以在不修改執行階段行為的情況下，透過重構程式碼來改善專案的品質與可維護性。Visual Studio Code 支援諸如 擷取方法 和 擷取變數 等重構作業 (refactorings)，讓您直接從編輯器內改善您的程式碼基底。

例如，用來避免重複程式碼（這是維護上的惡夢）的常見重構是擷取方法重構，您可以在其中選取原始碼並將其獨立為共用方法，以便在其他地方重複使用該程式碼。

重構是由語言服務所提供。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 在 VS Code 中開啟 在 VS Code Insiders 中開啟 設定，您可以設定在儲存檔案時自動套用的一組程式碼動作，例如組織匯入。根據您的工作區檔案與作用中的擴充功能，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：在儲存時絕不觸發程式碼動作

重構動作

擷取方法

選取您想要擷取的原始碼，然後選取邊界中的燈泡，或按 (⌘. (Windows, Linux Ctrl+.)) 以查看可用的重構。原始碼片段可以擷取至新方法，或在不同的各種範圍中擷取至新函式。在擷取重構期間，系統會提示您提供具意義的名稱。

擷取變數

TypeScript 語言服務提供擷取至 const 重構，以為目前選取的運算式建立新的區域變數

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

重新命名符號

重新命名是與重構原始碼相關的常見作業，VS Code 具有獨立的重新命名符號命令 (F2)。某些語言支援跨檔案重新命名符號。按下 F2，輸入您想要的新名稱，然後按下 Enter。將會重新命名所有檔案中該符號的所有執行個體。

重構預覽

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

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

您可以選取重構預覽面板中的任何變更，以取得重構作業所產生變更的 diff 檢視。

使用接受或放棄控制項來套用或取消建議的重構變更。

或者，您也可以透過取消選取重構預覽面板中的部分建議變更，來部分套用重構變更。

程式碼動作的鍵盤快速鍵

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

常見問題

為什麼我的程式碼發生錯誤時，卻看不到任何燈泡？

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