🚀 在 VS Code 中取得 ！

重構 TypeScript

原始碼重構可以藉由在不修改執行階段行為的情況下，重新建構您的程式碼，來改善專案的品質和可維護性。Visual Studio Code 支援重構作業 (重構)，例如 提取方法 和 提取變數，以從您的編輯器內改善您的程式碼庫。

Visual Studio Code 透過 TypeScript 語言服務內建支援 TypeScript 重構，在本主題中，我們將示範使用 TypeScript 語言服務的重構支援。

重新命名

最簡單的重構之一是重新命名方法或變數。按下 F2 以在您的 TypeScript 專案中重新命名游標下的符號

Renaming a method

重構

若要查看可用的 TypeScript 重構，請將游標放在原始碼的區域上，然後按一下滑鼠右鍵以帶出編輯器內容功能表並選取 [重構]，或直接按下 ⌃⇧R (Windows、Linux Ctrl+Shift+R)。

TypeScript refactoring

如需有關重構以及如何設定個別重構的鍵盤快速鍵的詳細資訊，請參閱重構。

可用的 TypeScript 重構包括

  • 提取至方法或函式 - 將選取的陳述式或運算式提取至檔案中的新方法或新函式。

    Triggering the extract method refactoring on a selection

    選取 [提取至方法] 或 [提取至函式] 重構之後，輸入提取的方法/函式的名稱。

  • 提取至常數 - 將選取的運算式提取至檔案中的新常數。

    Extracting a constant from a selection

  • 將類型提取至介面或類型別名 - 將選取的複雜類型提取至介面或類型別名。

    Extract an inline type to an interface

  • 移至新檔案 - 將檔案最上層範圍中的一或多個類別、函式、常數或介面移至新檔案。新檔案的名稱是從選取的符號名稱推斷而來。

    Moving a class to a new file

  • 在具名匯入與命名空間匯入之間轉換 - 在具名匯入 (import { Name } from './foo') 與命名空間匯入 (import * as foo from './foo') 之間轉換。

    Converting a named import to a namespace import

  • 在預設匯出與具名匯出之間轉換 - 從使用 export default 轉換為具有具名匯出 (export const Foo = ...)。

  • 將參數轉換為解構物件 - 重寫接受長引數清單的函式，以接受單一引數物件。

  • 產生 get 和 set 存取子 - 藉由產生 getter 和 setter 來封裝選取的類別屬性。

    Generating getters and setters from class property

  • 推斷函式傳回類型 - 將明確的傳回類型註釋新增至函式。

    The Infer function return type refactoring in action

  • 從箭頭函式新增/移除大括號 - 將單行箭頭函式轉換為多行並返回。

快速修正

快速修正是一些建議的編輯，可解決簡單的程式碼錯誤。快速修正範例包括

  • 將遺失的 this 新增至成員存取。
  • 修正拼錯的屬性名稱。
  • 移除無法連線的程式碼或未使用的匯入
  • 宣告

當您將游標移至 TypeScript 錯誤時，VS Code 會顯示燈泡，表示快速修正可用。按一下燈泡或按下 ⌘. (Windows、Linux Ctrl+.) 以顯示可用快速修正和重構的清單。

此外，[程式碼動作 Widget：包含附近快速修正] (editor.codeActionWidget.includeNearbyQuickFixes) 是預設啟用的設定，它會從 ⌘. (Windows、Linux Ctrl+.) (命令 ID editor.action.quickFix) 啟動行中最接近的快速修正，無論您的游標在該行的哪個位置。

此命令會醒目提示將使用快速修正重構或修正的原始碼。一般程式碼動作和非修正重構仍然可以在游標位置啟動。

未使用的變數和無法連線的程式碼

未使用的 TypeScript 程式碼 (例如，永遠為 true 的 if 陳述式的 else 區塊或未參考的匯入) 在編輯器中會淡出

Unreachable source code faded out

您可以將游標放在此未使用的程式碼上，並觸發快速修正命令 (⌘. (Windows、Linux Ctrl+.)) 或按一下燈泡，即可快速移除此未使用的程式碼。

若要停用淡出未使用的程式碼，請將 "editor.showUnused" 設定為 false。您也可以只在 TypeScript 中停用淡出未使用的程式碼，方法是設定

"[typescript]": {
    "editor.showUnused":  false
},
"[typescriptreact]": {
    "editor.showUnused":  false
},

整理匯入

[整理匯入] 原始碼動作會排序 TypeScript 檔案中的匯入，並移除未使用的匯入

您可以從 [來源動作] 內容功能表或使用 ⇧⌥O (Windows、Linux Shift+Alt+O) 鍵盤快速鍵執行 [整理匯入]。

當您儲存 TypeScript 檔案時，也可以自動執行整理匯入，方法是設定

"editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
}

在檔案移動時更新匯入

當您移動或重新命名 TypeScript 專案中其他檔案匯入的檔案時，VS Code 可以自動更新參考已移動檔案的所有匯入路徑。

typescript.updateImportsOnFileMove.enabled 設定控制此行為。有效的設定值為

  • "prompt" - 預設值。詢問是否應針對每個檔案移動更新路徑。
  • "always" - 一律自動更新路徑。
  • "never" - 不要自動更新路徑，也不要提示。

儲存時的程式碼動作

editor.codeActionsOnSave 設定可讓您設定一組在儲存檔案時執行的程式碼動作。例如，您可以藉由設定在儲存時啟用整理匯入

// On explicit save, run fixAll source action. On auto save (window or focus change), run organizeImports source action.
"editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.organizeImports": "always",
}

截至今日，支援下列列舉

  • explicit (預設值)：在明確儲存時觸發程式碼動作。與 true 相同。
  • always：在明確儲存時以及從視窗或焦點變更自動儲存時觸發程式碼動作。
  • never：永不觸發儲存時的程式碼動作。與 false 相同。

您也可以將 editor.codeActionsOnSave 設定為要依序執行的程式碼動作陣列。

以下是一些來源動作

  • "organizeImports" - 啟用儲存時整理匯入。
  • "fixAll" - 儲存時自動修正會計算一輪中所有可能的修正 (適用於所有提供者，包括 ESLint)。
  • "fixAll.eslint" - 僅限 ESLint 的自動修正。
  • "addMissingImports" - 在儲存時新增所有遺失的匯入。

如需詳細資訊，請參閱TypeScript。

程式碼建議

VS Code 會自動建議一些常見的程式碼簡化，例如將 promise 上的 .then 呼叫鏈轉換為使用 async 和 await

將 "typescript.suggestionActions.enabled" 設定為 false 以停用建議。

後續步驟

請繼續閱讀以瞭解

02/06/2025