To generate a method call and a method from existing code, you can use a feature called
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. Show For example, a common refactoring used to avoid duplicating code (a maintenance headache) is the Extract Method refactoring, where you select source code that you'd like to reuse elsewhere and pull it out into its own shared method. Refactorings are provided by a language service and VS Code has built-in support for TypeScript and JavaScript refactoring through the TypeScript language service. Refactoring support for other programming languages is provided through VS Code extensions that contribute language services. The UI and commands for refactoring are the same across languages, and in this topic we'll demonstrate refactoring support with the TypeScript language service. Code Actions = Quick Fixes and refactoringsIn VS Code, Code Actions can provide both refactorings and Quick Fixes for detected issues (highlighted with green squiggles). An available Code Action is announced by a lightbulb near the source code when the cursor is on a squiggle or selected text region. Clicking on the Code Action lightbulb or using the Quick Fix command ⌘. (Windows, Linux Ctrl+.) will display Quick Fixes and refactorings. If you'd just like to see refactorings without Quick Fixes, you can use the Refactor command (⌃⇧R (Windows, Linux Ctrl+Shift+R)).
Refactoring actionsSelect the source code you'd like to extract and then click on the lightbulb in the gutter or press (⌘. (Windows, Linux Ctrl+.)) to see available refactorings. Source code fragments can be extracted into a new method, or into a new function at various different scopes. During the extract refactoring, you will be prompted to provide a meaningful name. TypeScript language service provides Extract to const refactoring to create a new local variable for the currently selected expression: When working with classes, you can also extract a value to a new property. Rename symbolRenaming is a common operation related to refactoring source code and VS Code has a separate Rename Symbol command (F2). Some languages support rename symbol across files. Press F2 and then type the new desired name and press Enter. All usages of the symbol will be renamed, across files. Keybindings for Code ActionsThe
Code Action kinds are specified by extensions using the enhanced Using the above keybinding, if only a single You can also control how/when Code Actions are automatically applied using the
Valid values for
When a Code Action keybinding is configured with This keybinding uses
Extensions with refactoringsYou can find extensions that support refactoring by looking in the VS Code Marketplace. You can go to the Extensions view (⇧⌘X (Windows, Linux Ctrl+Shift+X)) and type 'refactor' in the search box. You can then sort by install count or ratings to see which extensions are popular.
Next steps
Common questionsWhy don't I see any lightbulbs when there are errors in my code?Lightbulbs (Code Actions) are only shown when your cursor hovers over the text showing the error. Hovering over the text will show the error description, but you need to move the cursor or select text to see lightbulbs for Quick Fixes and refactorings. 10/6/2022 |