ReSharper 2016.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:

Code Highlighting

ReSharper can visually highlight JavaScript symbols, for example:

/help/img/dotnet/2016.3/ReSharper_by_Language__HTML__Code_Highlighting_01.png

Code Completion

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

  • completion for tags
    /help/img/dotnet/2016.3/ReSharper_by_Language__HTML__Code_Completion_01.png
  • completion for attributes
    /help/img/dotnet/2016.3/ReSharper_by_Language__HTML__Code_Completion_02.png
  • completion for CSS classes and identifiers
    /help/img/dotnet/2016.3/ReSharper_by_Language__HTML__Code_Completion_03.png

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 /help/img/dotnet/2016.3/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 in 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.

/help/img/dotnet/2016.3/ReSharper_by_Language__HTML__Context_Actions__expand_empty_tag_01.png

After applying the context action, the appropriate end tag is added and the caret is placed exactly between start and end tags.
/help/img/dotnet/2016.3/ReSharper_by_Language__HTML__Context_Actions__expand_empty_tag_02.png

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.

/help/img/dotnet/2016.3/ReSharper_by_Language__HTML__Context_Actions__remove_attribute_01.png

After applying the context action, the appropriate attribute is removed.
/help/img/dotnet/2016.3/ReSharper_by_Language__HTML__Context_Actions__remove_attribute_02.png

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

/help/img/dotnet/2016.3/ReSharper_by_Language__HTML__Context_Actions__insert_table_row_01.png

After applying the context action, a new row is inserted.
/help/img/dotnet/2016.3/ReSharper_by_Language__HTML__Context_Actions__insert_table_row_02.png

Quick Documentation

You can use the Quick Documentation pop-up window to get some useful information about an element right in the editor. For more information, see Quick Documentation.

/help/img/dotnet/2016.3/ReSharper_by_Language__HTML__Quick_Documentation.png

Last modified: 12 October 2017

See Also