[ Web Proxy ]
URL:
Viewing: https://code.visualstudio.com/docs/typescript/typescript-refactoring [Back]  [Original]
Refactoring TypeScript
Visual Studio Code
Switch to the dark theme [Switch to the dark theme] Switch to the light theme [Switch to the light theme] Download

Rewatch VS Code Live at MS Build 2026

All Docs

Languages

Topics Overview JavaScript JSON HTML Emmet CSS, SCSS and Less TypeScript Markdown PowerShell C++ Java PHP Python Julia R Ruby Rust Go T-SQL C# .NET Swift Working with JavaScript Node.js Tutorial Node.js Debugging Deploy Node.js Apps Browser Debugging Angular Tutorial React Tutorial Vue Tutorial Debugging Recipes Performance Profiling Extensions Tutorial Transpiling Editing Refactoring Debugging Quick Start Tutorial Run Python Code Editing Linting Formatting Debugging Environments Testing Python Interactive Django Tutorial FastAPI Tutorial Flask Tutorial Create Containers Deploy Python Apps Python in the Web Settings Reference Getting Started Navigate and Edit Refactoring Formatting and Linting Project Management Build Tools Run and Debug Testing Spring Boot Modernizing Java Apps Application Servers Deploy Java Apps GUI Applications Extensions FAQ Intro Videos GCC on Linux GCC on Windows GCC on Windows Subsystem for Linux Clang on macOS Microsoft C++ on Windows Build with CMake CMake Tools on Linux CMake Quick Start C++ Dev Tools for Copilot Editing and Navigating Debugging Configure Debugging Refactoring Settings Reference Configure IntelliSense Configure IntelliSense for Cross-Compiling FAQ Intro Videos Get Started Navigate and Edit IntelliCode Refactoring Formatting and Linting Project Management Build Tools Package Management Run and Debug Testing FAQ
Copy as Markdown

On this page there are 9 sections

Refactoring TypeScript

Source code refactoring can improve the quality and maintainability of your project by restructuring your code while not modifying the runtime behavior. Visual Studio Code supports refactoring operations (refactorings) such as Extract Method and Extract Variable to improve your code base from within your editor.

Visual Studio Code has built-in support for TypeScript refactoring through the TypeScript language service and in this topic we'll demonstrate refactoring support with the TypeScript language service.

Rename

One of the simplest refactorings is to rename a method or variable. Press F2 to rename the symbol under the cursor across your TypeScript project:

Renaming a method [Renaming a method]

Refactoring

To see the available TypeScript refactorings, put your cursor on a region of your source code and either right-click to bring up the editor context menu and select Refactor or press R (Windows, Linux Ctrl+Shift+R) directly.

TypeScript refactoring [TypeScript refactoring]

See Refactorings for more information about refactorings and how you can configure keyboard shortcuts for individual refactorings.

Available TypeScript refactorings include:

  • Extract to method or function - Extract the selected statements or expressions to either a new method or a new function in the file.

    Triggering the extract method refactoring on a selection [Triggering the extract method refactoring on a selection]

    After selecting the Extract to method or Extract to function refactoring, enter the name of the extracted method/function.

  • Extract to constant - Extract the selected expression to a new constant in the file.

    Extracting a constant from a selection [Extracting a constant from a selection]

  • Extract type to interface or type alias - Extract the selected complex type to either an interface or a type alias.

    Extract an inline type to an interface [Extract an inline type to an interface]

  • Move to new file - Move one or more classes, functions, constants, or interfaces in the top-level scope of the file to a new file. The new file's name is inferred from the selected symbol's name.

    Moving a class to a new file [Moving a class to a new file]

  • Convert between named imports and namespace imports - Convert between named imports (import { Name } from './foo') and namespace imports (import * as foo from './foo').

    Converting a named import to a namespace import [Converting a named import to a namespace import]

  • Convert between default export and named export - Convert from using a export default and having a named export (export const Foo = ...).

  • Convert parameters to destructured object - Rewrite a function that takes a long list of arguments to take a single arguments object.

  • Generate get and set accessors - Encapsulate a selected class property by generating a getter and setter for it.

    Generating getters and setters from class property [Generating getters and setters from class property]

  • Infer function return types - Adds explicit return type annotations to functions.

    The Infer function return type refactoring in action [The Infer function return type refactoring in action]

  • Add/remove braces from arrow function - Converts single line arrow function to multiline and back.

Quick Fixes

Quick Fixes are suggested edits that address simple coding errors. Example Quick Fixes include:

  • Adding a missing this to a member access.
  • Fixing a misspelled property name.
  • Removing unreachable code or unused imports
  • Declaring

When you move your cursor on to a TypeScript error, VS Code shows a light bulb that indicates that Quick Fixes are available. Click the light bulb or press . (Windows, Linux Ctrl+.) to show a list of available Quick Fixes and refactorings.

Additionally, Code Action Widget: Include Nearby Quick Fixes (editor.codeActionWidget.includeNearbyQuickFixes) is a setting that is enabled on default, which will activate the nearest Quick Fix in a line from . (Windows, Linux Ctrl+.) (command ID editor.action.quickFix), no matter where your cursor is in that line.

The command highlights the source code that will be refactored or fixed with Quick Fixes. Normal Code Actions and non-fix refactorings can still be activated at the cursor location.

Unused variables and unreachable code

Unused TypeScript code, such as the else block of an if statement that is always true or an unreferenced import, is faded out in the editor:

Unreachable source code faded out [Unreachable source code faded out]

You can quickly remove this unused code by placing the cursor on it and triggering the Quick Fix command (. (Windows, Linux Ctrl+.)) or clicking on the light bulb.

To disable fading out of unused code, set "editor.showUnused" to false. You can also disable fading of unused code only in TypeScript by setting:

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

Update imports on file move

When you move or rename a file that is imported by other files in your TypeScript project, VS Code can automatically update all import paths that reference the moved file.

The js/ts.updateImportsOnFileMove.enabled setting controls this behavior. Valid settings values are:

  • "prompt" -The default. Asks if paths should be updated for each file move.
  • "always" -Always automatically update paths.
  • "never" -Do not update paths automatically and do not prompt.

Code Actions on Save

The editor.codeActionsOnSave setting lets you configure a set of Code Actions that are run when a file is saved. For example, you can enable Organize Imports on save by setting:

Web Proxy Viewer  |  New URL  |  Original Page