HTML

RustRover は、構文やエラーのハイライト、コードスタイルに沿ったフォーマット、構造の検証、コード補完、コードエディター内の専用プレビュータブでのオンザフライプレビューなど、HTML への強力なサポートを提供します。

HTML 仕様は、言語 & フレームワーク | スキーマと DTD 設定ページ Ctrl+Alt+S のデフォルトの HTML 言語レベル設定で構成できます。デフォルトでは、W3C の仕様 HTML 5.0 が想定されます。

HTML ファイルを作成する

ファイル | 新規に移動し、リストから HTML ファイルを選択します。
表示されるダイアログで、拡張子を付けずに新しいファイルの名前を入力します。新しいファイル名の前にディレクトリ構造全体を入力できます。ネストされたディレクトリがまだ存在しない場合は、作成されます。
RustRover は、 HTML ファイルテンプレートをもとにスタブファイルを作成し、エディターで開きます。

HTML ファイルで参照を作成する

<script>、 <link> 、または <img> タグ内でファイルへのパスを入力し始めると、. RustRover によってパスの補完が提案されます。

または、プロジェクトウィンドウ名プロジェクトツールウィンドウ (Alt+1) で、参照したい JavaScript、CSS、イメージファイルを選択し、HTML ファイルにドラッグします。 RustRover は、 <head> 内に <script>、 <link>、 <img> タグを生成します。 <img> タグの場合、RustRover は height および height 属性も生成します。

コードフラグメントをタグでラップする

ラップするコードフラグメントを選択して Ctrl+Alt+T を押すか、メインメニューからコード | 囲むを選択します。
リストからタグで囲むを選択します。 RustRover は、選択範囲を括弧のペア（<> および </> ）で囲みます。
左括弧 <> の内側にタグを入力します。 RustRover は、終了括弧 </> のタグを自動的に入力します。

ドキュメントの検索

ほとんどの HTML タグや属性について、RustRover で対応する MDN 記事からの要約を表示できます。この要約はドキュメントポップ上へに表示され、タグや属性の廃止予定状態やさまざまなブラウザーとの互換性情報も示されます。

タグまたは属性がすべてのバージョンのブラウザーで利用可能なら、RustRover は互換性に関する情報を表示しません。

HTML クイックドキュメント: この属性はすべてのバージョンのブラウザーで利用可能です

それ以外の場合、ドキュメントポップ上へにはタグまたは属性をサポートするブラウザーおよびそのバージョンも一覧表示されます。

タグまたは属性が廃止予定の場合、ポップ上へはこのステータスについても通知します。

タグまたは属性のドキュメントを表示する

タグまたは属性にキャレットを置き、 Ctrl+Q を押すか、メインメニューから表示 | クイックドキュメントルックアップを選択します。
タグまたは属性の上にマウスを乗せると、RustRover がすぐにその参照をドキュメントポップ上へに表示します。
この動作をオフにすることも、ポップアップの表示を速くまたは遅くするように設定することもできます。以下のドキュメントポップ上への動作の構成を参照してください。

ドキュメントのポップアップの動作を構成する

コードシンボルの上にカーソルを合わせたときに自動でドキュメントを表示しないようにするには、ポップアップでをクリックし、マウス移動時に表示するオプションを無効化します。
ドキュメントポップ上へを速くまたは遅く表示するには、設定ダイアログ（Ctrl+Alt+S ）を開き、エディター | 一般 | コード補完に移動してから、ドキュメントのポップアップを表示するチェックボックスを選択して遅延時間を指定します。

ブラウザーでタグと属性の MDN ドキュメントを開く

ドキュメントポップアップ Ctrl+Q で下部のリンクをクリックします。
Shift+F1 を押すか、メインメニューから表示｜外部ドキュメントを選択します。

HTML ファイルのプレビュー出力

HTML コードの出力は、組み込みの RustRover プレビューや、外部の好きなブラウザーで開くことができます。

デフォルトでは、HTML ファイルをブラウザーまたは組み込みプレビューで開いた後、この HTML ファイル（またはリンクされた JavaScript やスタイルシートファイル）が手動または自動的に保存されるたびに、RustRover はページを自動的に再読み込みします。詳細は変更の保存と復元を参照してください。

入力時にページを再読み込みして、HTML や関連ファイルの変更がブラウザーまたは組み込みプレビューにすぐ反映されるように、デフォルト動作を変更できます。以下の自動再読み込み設定を参照してください。

RustRover 組み込みプレビュー

RustRover の組み込みプレビューを使えば、ブラウザーに切り替えてページをリフレッシュする手間がなくなり作業がスムーズになります。プレビューは別のエディタータブで開かれ、再読み込みの動作に応じて、入力時または変更の保存時に自動的に再読み込みされます。

RustRover 組み込みプレビューを開く

メインメニューで表示 | ブラウザーで開くに移動し、リストからビルトインプレビューを選択します。
または、コードの上にマウスを置くとブラウザーアイコンがポップ上へ表示されるため、それをクリックします。

ブラウザーで HTML ファイルをプレビューする

HTML コードが本番環境で正しくレンダリングされることを確認するには、特定のブラウザーで HTML ファイルをプレビューしてください。

組み込みの RustRover Web サーバーを使っている場合、再ロードの挙動に応じて、保存または入力時にページが自動的に再読み込みされます。

表示 | ブラウザーで開くに移動し、リストから目的のブラウザーを選択します。
デフォルトの RustRover ブラウザーを開くには、デフォルトを選択します。
または、コードの上にカーソルを置くとブラウザーアイコンのポップアップが表示され、目的のブラウザーを示すアイコンをクリックします。
ブラウザーが 1 つしかない場合は、 Alt+F2 を押してください。

ポップアップでブラウザーアイコンを設定する

設定ダイアログ（Ctrl+Alt+S ）を開き、ツール | ウェブブラウザーとプレビューに移動します。

一部のアイコンを非表示にするには、不要なブラウザーのアクティブチェックボックスをオフにします。
ポップ上へ全体を非表示にするには、 HTML ファイル用チェックボックスをオフにします。

自動再ロードを構成する

ページ再読み込みをトリガーするファイルを保存した場合、RustRover は了解ツールチップを表示します。

入力時にページを再読み込みして、HTML や関連ファイルの変更がブラウザーまたは組み込みプレビューにすぐ反映されるように、デフォルト動作を変更できます。

ツール | ウェブブラウザーとプレビュー設定ページ Ctrl+Alt+S に移動します。または、了解ツールチップで構成をクリックします。
再ロードの動作領域で、ブラウザーでページを再ロードおよび組み込みプレビューでページを再ロードリストから、Web ブラウザーおよび組み込みプレビューでページの自動再ロードをトリガーするアクションを選択します。デフォルトでは、保存時が選択されています。
- 対応する HTML ファイルまたはリンクされたファイルを更新するときにページを再ロードするには、変更時を選択します。
- 自動アップロードを抑制するには、無効を選択します。

エディターで Web ページの HTML ソースコードを表示する

Ctrl+Shift+A を押し、リストから URL からソースコードを開く… を選択します。
表示される URL を開くダイアログで、Web ページの URL アドレスを入力するか、リストから以前に開いた URL を選択します。

埋め込まれたイメージを表示する

RustRover では、HTML ファイルに埋め込まれた画像を表示するための複数の方法が用意されています。ソースへのナビゲーションを使用するか、外部のグラフィカルエディターでイメージを開くか、オンザフライでイメージをプレビューするを使用できます。

RustRover でイメージを表示する

プロジェクトウィンドウ名プロジェクトツールウィンドウで、イメージファイルを見つけて選択します。
あるいは、エディター内のイメージへの参照にキャレットを置き、 Ctrl+B を押します。
別のタブではなくポップ上へでイメージをプレビューするには、そのイメージへの参照を選択して Ctrl+Shift+I を押します。

外部エディターでイメージを表示する

プロジェクトウィンドウ名プロジェクトツールウィンドウで、イメージファイルを右クリックし、外部エディターに移動を選択します。
または、 Ctrl+Alt+F4 を押します。
RustRover は画像を OS の既定のエディターで開きます。 IDE がファイルを開く別のイメージエディターを設定できます。

デフォルトの外部エディターを変更する

エディターでイメージを右クリックし、コンテキストメニューから外部エディターのパスを編集… を選択します。
Ctrl+Shift+A を押して 外部エディターのパスを編集 と入力することもできます。
外部エディターへのパスダイアログで、画像を開きたいアプリケーションのパスを指定し、保存をクリックします。

インクルードファイルの抽出

HTML コードの断片を別のインクルードファイルに抽出できます。 <script> タグ内の JavaScript コードブロック全体も同様に抽出できます。 RustRover では、選択したフラグメントの複製の代わりに参照の追加も提案されます。

エディターで、抽出するコードブロックを選択し、メインメニューまたは選択したコンテキストメニューからリファクタリング | 抽出 | インクルードファイルの抽出を選択します。
表示されるインクルードファイルの抽出ダイアログで、拡張子を付けずにインクルードファイルの名前とそれを格納するディレクトリを指定します。事前定義されたディレクトリをそのまま使用するか、別のディレクトリを選択することができます。
準備ができたら OK をクリックします。 RustRover は、選択したソースコードをターゲットディレクトリ内の指定したファイルに抽出し、ソースファイルに対応する参照を生成します。

構文ハイライトを構成する

好みや習慣に合わせて HTML 対応構文ハイライトの設定が可能です。

設定ダイアログ (Ctrl+Alt+S) で、エディター | カラースキーム | HTML に進みます。
配色を選択し、デフォルトから継承されたハイライト設定を受け入れるか、カスタマイズします。

カスタム HTML タグを構成する

RustRover は、すべての標準 HTML タグを認識して、マークアップ内の未知のタグをすべて報告します。カスタム HTML タグを利用するフレームワークを使っている場合、そのタグも未知として報告されるため、その場合は誤検知になります。

単一の HTML タグを既知のカスタムタグのリストに追加するには、ハイライトされたタグにキャレットを置き、 Alt+Enter を押してカスタム HTML タグに[タグ]を追加を選択します。
複数のカスタム HTML タグを構成するには、設定ダイアログ (Ctrl+Alt+S) のエディター | インスペクションページに移動し、 HTML | 不明なタグインスペクションを見つけて、右側のインスペクションオプションでカスタム HTML タグのリストを構成します。