ReSharper Web Help

Code highlighting

ReSharper provides code analysis and coding assistance for HTML as well. It can visually highlight JavaScript symbols, for example:

ReSharper_by_Language__HTML__Code_Highlighting_01

ReSharper also validates HTML code and underlines obsolete or non-standard elements and attributes.

ReSharper_by_Language__HTML__Code_Highlighting_02

Path mapping

As you develop a web application, you deploy it onto a destination server from time to time. However, paths to files in the destination environment may differ from paths in your local environment, which makes analysing paths difficult. To make life easier, ReSharper highlights unknown paths and suggests several quick-fixes:
ReSharper_by_Language__HTML__Path_Mapping_01
Click Set path mapping to open the Path mapping dialog box where you can create and change path mapping rules. Click Ignore or Substitute to specify what kind of rule it should be. Depending on the choice, type a path that should be ignored or a path that should be substituted and a path that is a substitution.
ReSharper_by_Language__HTML__Path_Mapping_02
You can create as many rules as you need and manage them at any time. Open the Visual Studio Properties window for your web project and find the Path mapping property. If some path rules are defined, then its value is Custom, otherwise - Not set. To open the Path mapping dialog, click the nearby button.
ReSharper_by_Language__HTML__Path_Mapping_03

Code completion

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

  • completion for tags
    ReSharper_by_Language__HTML__Code_Completion_01
  • completion for attributes
    ReSharper_by_Language__HTML__Code_Completion_02
  • completion for CSS classes and identifiers
    ReSharper_by_Language__HTML__Code_Completion_03

Examples of context actions

Expand empty tag
If you want to add some text inside a tag which is not expanded, then use the following context action.
ReSharper_by_Language__HTML__Context_Actions__expand_empty_tag_01
After applying the context action, the appropriate end tag is added and the caret is placed exactly between start and end tags.
ReSharper_by_Language__HTML__Context_Actions__expand_empty_tag_02

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_by_Language__HTML__Context_Actions__remove_attribute_01
After applying the context action, the appropriate attribute is removed.
ReSharper_by_Language__HTML__Context_Actions__remove_attribute_02

Insert table row
This context action is a very convenient way of inserting rows into a table.
ReSharper_by_Language__HTML__Context_Actions__insert_table_row_01
After applying the context action, a new row is inserted.
ReSharper_by_Language__HTML__Context_Actions__insert_table_row_02

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.
ReSharper_by_Language__HTML__Quick_Documentation

Navigation

File Structure provides an overview of the current file.
ReSharper_by_Language__HTML__File_Structure
You can easily navigate to an element in the file by clicking it in the File Structure window.

The Navigate To feature is also available and helps, for example, navigate between HTML and CSS files.
ReSharper_by_Language__HTML__Navigate_To

Templates

ReSharper provides several live templates for HTML. As well as code completion, live templates help a lot quickly create new code. For more information, see using live templates.
Reference__Options__Templates__Live_Templates__Predefined__HTML__script__before
Another way to modify code is using surround templates. There are two predefined surround templates for HTML-like code, so you can use one of them or create your own.
Reference__Templates_Explorer__Surround_With_Templates__Predefined__HTML-Like__tag__before
After you choose the first template, ReSharper prompts you to specify what tag should be used to surround the selected content. The list of available tags is based on tags used in the current file.
Reference__Templates_Explorer__Surround_With_Templates__Predefined__HTML-Like__tag__after