編輯

重構 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 重構包括

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

選取 [提取至方法] 或 [提取至函式] 重構後，輸入提取的方法/函式的名稱。
提取至常數 - 將選取的運算式提取至檔案中的新常數。
將類型提取至介面或類型別名 - 將選取的複雜類型提取至介面或類型別名。
移動到新檔案 - 將檔案最上層範圍中的一個或多個類別、函式、常數或介面移動到新檔案。新檔案的名稱會從選取的符號名稱推斷而來。
在具名匯入和命名空間匯入之間轉換 - 在具名匯入 (import { Name } from './foo') 和命名空間匯入 (import * as foo from './foo') 之間轉換。
在預設匯出和具名匯出之間轉換 - 從使用 export default 轉換為具有具名匯出 (export const Foo = ...)。
將參數轉換為解構物件 - 重新撰寫採用長引數清單的函式，使其採用單一引數物件。
產生 get 和 set 存取子 - 藉由為選取的類別屬性產生 getter 和 setter 來封裝它。
推斷函式傳回類型 - 將明確的傳回類型註釋新增至函式。
從箭頭函式新增/移除大括號 - 將單行箭頭函式轉換為多行並返回。

快速修正

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

將遺失的 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 會自動建議一些常見的程式碼簡化，例如將承諾的 .then 呼叫鏈轉換為使用 async 和 await

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

後續步驟

繼續閱讀以了解

編輯 TypeScript - 了解 VS Code 適用於 TypeScript 的編輯功能。
偵錯 TypeScript - 為您的 TypeScript 專案設定偵錯工具。

04/03/2025