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 also validates HTML code and underlines obsolete or non-standard elements and attributes.

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:

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.

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.

Code completion

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

  • completion for tags
  • completion for attributes
  • completion for CSS classes and identifiers

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.

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

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.

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

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

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

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.

Navigation

File Structure provides an overview of the current file.

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.

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.

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.

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.

See Also

Procedures

Reference