ReSharper 2023.3 Help

Coding Assistance in HTML

Most of ReSharper's coding assistance features are also supported in HTML. You can find the detailed information on these features in the corresponding topics of the Coding assistance section. In the main topic of the section, you can also find the feature matrix and check what exactly is supported in HTML.

In this topic, you can find some examples of using coding assistance features in HTML.

Syntax highlighting

ReSharper can visually highlight JavaScript symbols in HTML attributes, for example:

ReSharper: Syntax highlighting in HTML

Code completion

Code Completion helps you write code fast and avoid typos. In HTML the following completion features are available:

  • completion for tags

    ReSharper: completion for tags in HTML
  • completion for attributes

    ReSharper: completion for attributes in HTML
  • completion for CSS classes and identifiers

    ReSharper: completion for CSS classes and identifiers in HTML

Examples of context actions

ReSharper provides a set of context actions that target HTML code. You can find the full list of these actions in the Code Editing | HTML | Context actions page of ReSharper Options. If necessary, you can also disable some of the actions using this page.

As soon as a context action becomes available for the current caret position, ReSharper displays the corresponding action indicator ThemedIcon.ContextAction.Screen.(Gray).png to the left of the caret. Sometimes however, ReSharper provides several contextually available features for the current caret position. In this case, the action indicator corresponding to the action with the highest priority is shown, and all other actions only appear when you expand the action list by clicking on the action indicator or pressing Alt+Enter Context actions have the lowest priority, therefore, they often appear at the bottom of the action list.

Here are some examples of context actions for HTML:

Expand empty tag

If you want to add some text inside a tag which is not expanded, then use the following context action.

ReSharper: Expand empty tag context action in HTML

After applying the context action, the appropriate end tag is added and the caret is placed exactly between start and end tags.

ReSharper: Expand empty tag context action in HTML

Remove attribute

If you have some useless or not required attribute, instead of manually selecting the whole attribute and its value, then deleting them, use this context action.

ReSharper: Remove attribute context action in HTML

After applying the context action, the appropriate attribute is removed.

ReSharper: Remove attribute context action in HTML

Insert table row

This context action is a very convenient way of inserting rows into a table.

ReSharper: Insert table row context action in HTML

After applying the context action, a new row is inserted.

ReSharper: Insert table row context action in HTML

Quick documentation

You can use the Quick Documentation popup to get some useful information about an element right in the editor.

ReSharper: Quick documentation in HTML
Last modified: 21 March 2024