HTML
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), 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 Options Ctrl+Alt+S. By default, specification HTML 5.0 from W3C is assumed.
Creating an HTML file
From the main menu, select HTML File from the list. JetBrains Rider creates a stub file based on the HTML file template and opens it in the editor.
, and then select
Creating 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.
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.
Wrapping a code fragment in a tag
Select the code fragment to wrap and press Ctrl+Alt+T or select
from the main menu.From the list, select Wrap with Tag. JetBrains Rider encloses the selection in a pair of brackets (
<>
and</>
).Type the tag inside the opening brackets
<>
. JetBrains Rider automatically fills in the tag in the closing brackets</>
.
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.
Otherwise, the Documentation popup also lists the browsers and their versions that support the tag or the attribute.
If the tag or the attribute is deprecated, the popup also informs you about this status.
View documentation for a tag or an attribute
Position the caret at the tag or the attribute and press Ctrl+Shift+F1 or select
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 Options dialog Ctrl+Alt+S, go to , and clear the Show quick documentation on mouse move checkbox.
To have the Documentation popup shown faster or slower, open the Options dialog Ctrl+Alt+S, go to , 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+Shift+F1, click the link at the bottom.
Press Shift+F1 or select
from the main menu.
Previewing output of an HTML file in a browser
Select default JetBrains Rider browser, select Default.
from the main menu and then select the desired browser from the list. To open theAlternatively, hover your mouse pointer over the code to show the browser icons popup, and click the icon that indicates the desired browser:
To hide all the icons or some of them, clear the Active checkboxes for the unnecessary browsers on the Web Browsers page.
To suppress showing the browser icons popup, clear the For HTML files checkbox.
If you have only one browser configured, just press Alt+F2.
Viewing HTML source code of a web page in the editor
Press Ctrl+Shift+A and select Open Source Code from URL... from the list.
In the Open URL dialog that opens, type the URL address of the web page or choose a previously opened URL from the list.
Viewing 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.
Check and configure the appearance of the preview on the Images page.
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
Configure the path to the external editor on the Images page ( for Windows and Linux or for macOS).
Select the image file in the Project tool window, and choose or press Ctrl+Alt+F4.
Extracting an include file
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.
In the editor, select the code block to be extracted and choose
from the main menu or from the context menu of the selection.In the Extract Include File dialog that opens, specify the name of the include file without the extension and the directory to store it in. You can accept the predefined directory or select another one.
Click OK, when ready. JetBrains Rider extracts the selected source code into the specified file in the target directory and generates the corresponding reference in the source file.
Configuring syntax highlighting
You can configure HTML-aware syntax highlighting according to your preferences and habits.
In the Options dialog Ctrl+Alt+S, go to .
Select the color scheme, accept the highlighting settings inherited from defaults or customize them as described in Configuring Colors and Fonts.