JetBrains Rider
 
2021.3
Shortcuts: Visual Studio
Get JetBrains Rider
You are viewing the documentation for an earlier version of JetBrains Rider.
  1. Languages and frameworks
  2. HTML

HTML

Last modified: 07 April 2022

Required plugin: HTML Tools

The plugin is bundled with JetBrains Rider and enabled by default.

JetBrains Rider brings powerful support for HTML that includes syntax and error highlighting, formatting according to the code style, structure validation, code completion, on-the-fly preview during a debugging session (Live Edit) or in the dedicated preview tab in the code editor, and much more.

HTML specification is configurable with the Default HTML language level preference on the Languages and Frameworks | Schemas and DTDs page of the IDE settings Ctrl+Alt+S. By default, specification HTML 5.0 from W3C is assumed.

Create an HTML file

Create references in an HTML file

Inside a <script>, <link>, or <img> tag, JetBrains Rider suggests completion for the path to the file you are referencing.

https://resources.jetbrains.com/help/img/rider/2021.3/ws_html_complete_path_light.png
Gif

Alternatively, in the Project tool window, select the JavaScript, CSS, or image file you want to reference and drag it into the HTML file. JetBrains Rider generates the <script>, <link>, or <img> tags inside <head>. For <img> tags, JetBrains Rider also generates the width and height attributes.

https://resources.jetbrains.com/help/img/rider/2021.3/drag_to_html_light.png
Gif

Wrap code fragments in tags

Documentation look-up

For most HTML tags and attributes JetBrains Rider can show you a summary from the corresponding MDN article. This summary is displayed in the Documentation popup which also shows the deprecation status of a tag or an attribute and information on its compatibility with various browsers.

If the tag or the attribute is available in all versions of browsers, JetBrains Rider does not show any information about its compatibility.

HTML quick documentation: attribute is available in all versions of browsers

Otherwise, the Documentation popup also lists the browsers and their versions that support the tag or the attribute.

HTML quick documentation: compatible browsers are listed

note

Compatibility is checked only for Chrome, Chrome Android, Safari, Safari iOS, Firefox, Internet Explorer, and Edge.

If the tag or the attribute is deprecated, the popup also informs you about this status.

HTML quick documentation: status Deprecated for <big> tag

View documentation for a tag or an attribute

  • Position the caret at the tag or the attribute and press Ctrl+K, I or select View | Quick Documentation Lookup from the main menu.

  • When you hover the mouse pointer over a tag or an attribute, JetBrains Rider immediately displays the reference for it in the Documentation popup.

    You can turn off this behavior or configure the popup to appear faster or slower, see Configuring the behavior of Documentation popup below.

Configure the behavior of Documentation popup

  • To turn off showing documentation automatically, open the Settings/Preferences dialog (Ctrl+Alt+S), go to Editor | Code Editing, and clear the Show quick documentation on hover checkbox.

  • To have the Documentation popup shown faster or slower, open the Settings/Preferences dialog (Ctrl+Alt+S), go to Editor | General | Code Completion, then select the Show the documentation popup checkbox and specify the delay time.

Open the MDN documentation for tags and attributes in the browser

  • In the Documentation popup Ctrl+K, I, click the link at the bottom.

  • Press Shift+F1 or select View | External Documentation from the main menu.

Preview output of HTML files

You can open the output of your HTML code in the built-in JetBrains Rider preview or externally, in a browser of your choice.

note

The preview functionality relies on the JetBrains Rider built-in web server. This server is always running and does not require any manual configuration. All the project files are served on the built-in server with the root URL http://localhost:<built-in server port>/<project root>, with respect to the project structure.

By default the built-in server port is set to the default JetBrains Rider port 63342 through which JetBrains Rider accepts connections from services. To change this default value, open the Settings/Preferences dialog (Ctrl+Alt+S), go to Build, Execution, Deployment | Debugger, and in the Built-in Server specify any other value starting from 1024.

By default, after you open an HTML file in the browser or in the built-in preview, JetBrains Rider automatically reloads the page every time this HTML file (or any linked JavaScript or Style Sheet file) is saved manually or automatically, see Save and revert changes.

You can change the default behavior to reload the page as you type so the changes to the HTML or related file immediately appear in the browser or in the built-in preview. See Configure automatic reload below.

JetBrains Rider built-in preview

JetBrains Rider built-in preview makes your work faster as you no longer need to switch to the browser and refresh the pages. The preview is opened in a separate editor tab and reloaded automatically as you type or when you save the changes, depending on the reload behavior.

https://resources.jetbrains.com/help/img/rider/2021.3/ws_html_built_in_preview.png
Gif

Open the JetBrains Rider built-in preview

  • From the main menu, select View | Open in Browser, and then select the JetBrains Rider icon Built-in Preview from the list.

  • Alternatively, hover your mouse pointer over the code to show the browser icons popup, and click the JetBrains Rider icon.

Preview an HTML file in a browser

To make sure your HTML code is rendered properly in production environment, preview HTML files in specific browsers.

If you are using the built-in JetBrains Rider web server, the page is reloaded automatically when you save the changes or as you type, depending on the reload behavior.

warning

Automatic reload doesn't work when the page is uploaded to a manually configured default web server, see Configuring synchronization with a web server and Default server configuration for details.

Configure the browser icons in the popup

Open the Settings/Preferences dialog (Ctrl+Alt+S) and go to Tools | Web Browsers.

  • To hide some of the icons, clear the Active checkboxes for the unnecessary browsers.

  • To hide the whole popup, clear the For HTML files checkbox.

Configure automatic reload

By default, after you open an HTML file in the browser or in the built-in preview, JetBrains Rider automatically reloads the page every time this HTML file (or any linked JavaScript or Style Sheet file) is saved manually or automatically, see Save and revert changes.

https://resources.jetbrains.com/help/img/rider/2021.3/ws_html_reload_on_save.png
Gif

When you save a file that triggers page reload, JetBrains Rider shows a Got it tooltip.

Reload on save: Got it tooltip

You can change the default behavior to reload the page as you type so the changes to the HTML or related file immediately appear in the browser or in the built-in preview.

View HTML source code of a web page in the editor

View embedded images

JetBrains Rider offers several ways to view images embedded in an HTML file. You can use navigation to source, open an image in an external graphical editor, or preview images on-the-fly.

View images in JetBrains Rider

  • Select the image file in the Project tool window and press F4.

  • Alternatively, position the caret at the reference to the image in the editor and press F12

  • To preview an image in a popup instead of in a separate tab, select the reference to it and press Alt+F12

View images in an external editor

  • Select the image file in the Project tool window, and select Jump to external editor or press Ctrl+Alt+F4.

    JetBrains Rider opens the image in the editor that is used in your OS by default. You can configure another image editor in which the IDE will open files.

Change the default external editor

  1. Right-click an image in the editor and select Edit Path to External Editor… from the context menu.

    You can also press Ctrl+Shift+A and type Edit Path to External Editor.

  2. In the Path to External Editor dialog, specify the path to the application in which you want to open images and click Save.

    Specifying the path to an external editor

Extract include files

You can extract a fragment of HTML code into a separate include file. Entire JavaScript code blocks inside a <script> tags can be extracted as well. JetBrains Rider also suggests adding references instead of duplicates of the selected fragment.

Configure syntax highlighting

You can configure HTML-aware syntax highlighting according to your preferences and habits.

Configure custom HTML tags

JetBrains Rider is aware of all standard HTML tags, and reports all unknown tags in your markup. If you use a framework that relies on custom HTML tags, such tags will be also reported as unknown, which would be a false positive in that case.

See also

Procedures