Refactorings for HTML

Last modified: 21 July 2022

tip

In addition to refactorings, ReSharper provides a number of smaller local code transformations available with Context actions.

Perform a refactoring

  1. Set your caret at a symbol, select a code fragment that you want to refactor, or select an item in a tool window.

  2. Do one of the following:

    • In the main menu, choose ReSharper | Refactor, and then select a desired refactoring. The list of refactorings available in this menu depends on the current context. If ReSharper cannot suggest any refactorings for the context, the entire menu is disabled.

    • In the editor, File Structure window, or other ReSharper window, right-click the item you want to transform, choose Refactor from the context menu, and then select the required refactoring.  

    • In the main menu, choose  ReSharper | Refactor | Refactor This, or press Control+Shift+R to display the list of applicable refactorings, then select one of them. You can also choose Refactor This in the context menu of a selection.

    • Use default keyboard shortcuts assigned to specific refactorings, or assign custom shortcuts to your favorite refactoring commands.

  3. If the selected refactoring requires user input, the refactoring wizard opens. Note that the wizard's dialogs are not modal, so you can edit the code while the wizard is open.

    To roll back refactoring actions, the wizard provides the option  To enable Undo, open all files with changes for editing. If you select this option, ReSharper opens all modified files in new editor tabs and enables you to roll the refactoring back. In this case, you will need to save the changes yourself. If this option is not selected, ReSharper saves modified files automatically, without opening them.

  4. If a refactoring operation would cause code conflicts (such as duplicate names, visibility conflicts, and so on), the wizard displays the list of conflicts on the last step, before you apply the refactoring. For some conflicts, the wizard can also suggest quick-fixes. For more information, see Resolve conflicts in refactorings.

note

Visual Studio provides its own Refactor menu, which is available from both main and context menus. By default, ReSharper hides the native Visual Studio menu replacing it with its own one. To make the Visual Studio menu accessible, select the Hide overridden Visual Studio menu items checkbox on the Environment | Editor | Visual Studio Features page of ReSharper options.

Some refactorings are available immediately after you modify code in the editor. For more information, see Inplace refactorings

Extract CSS Style

This refactoring allows extracting inline styles as well styles defined in the <style> tag and place them under the specified selectors.

Extract Style refactoring in HTML

In the refactoring wizard, you can change the selector if necessary and select the styles to be extracted:

Extract Style refactoring in HTML

This refactoring is also available for ASP.NET, Razor, and CSS files

Move to Another File

This refactoring allows you to move CSS classes and selectors to an external CSS stylesheet. To move a single class or selector, set your caret at it or anywhere inside its braces, to move multiple items, select them. Then you can either use the Control+Shift+R shortcut and then select the Move refactoring, or use the dedicated F6 shortcut.

Move to Another File refactoring in HTML

Rename

The Rename refactoring, also available with the dedicated F2 shortcut, helps renaming classes in HTML. ReSharper finds all usages of this class in the related CSS, JavaScript, TypeScript files. If the new name conflicts with any existing class names in scope, ReSharper prompts you to resolve the conflicts.

Rename refactoring for classes in HTML

See also

Concepts