重構

原始碼重構可以在不修改執行時行為的情況下，透過重組程式碼來提高專案的質量和可維護性。Visual Studio Code 支援提取方法和提取變數等重構操作（refactorings），讓你在編輯器內改善程式碼庫。

例如，一種常用於避免程式碼重複（一個維護難題）的重構是提取方法重構，你可以選中一段原始碼並將其提取到一個獨立的共享方法中，以便在其他地方重用這段程式碼。

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

不同語言的重構 UI 元素和 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 設定，你可以配置一組在儲存檔案時自動應用的程式碼操作，例如整理匯入。根據你的工作區檔案和活動擴充套件，智慧感知會提供一個可用程式碼操作的列表。

你可以為 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 進行除錯。

常見問題

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

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