言語およびフレームワーク: HTML
JetBrains Rider は、構文やエラーのハイライト、コードスタイルに応じたフォーマット、構造検証、コード補完、デバッグセッション中のオンザフライプレビュー（ライブ編集）やコードエディターの専用プレビュータブなど、HTML を強力にサポートします。
HTML ツールプラグインを有効にする
この機能は、デフォルトで JetBrains Rider にバンドルされて有効になっている HTML ツール(英語)プラグインに依存しています。関連する機能が利用できない場合は、プラグインを無効にしていないことを確認してください。
Ctrl+Alt+S を押して設定を開き、を選択します。
インストール済みタブを開き、HTML ツールプラグインを見つけて、プラグイン名の横にあるチェックボックスを選択します。
HTML 仕様は、言語 & フレームワーク | スキーマと DTD 設定ページ Ctrl+Alt+S のデフォルトの HTML 言語レベル設定で構成できます。デフォルトでは、W3C の仕様 HTML 5.0 が想定されます。
HTML ファイルを作成する
ソリューションエクスプローラーでプロジェクトまたはディレクトリを右クリックし、を選択します。
表示されるダイアログで、拡張子を付けずに新しいファイルの名前を入力します。新しいファイル名の前にディレクトリ構造全体を入力できます。ネストされたディレクトリがまだ存在しない場合は、作成されます。
JetBrains Rider は、HTML ファイルテンプレートに基づいてスタブファイルを作成し、エディターで開きます。
HTML ファイルで参照を作成する
<script>、<link>、<img> タグ内で、JetBrains Rider は、参照しているファイルへのパスの補完を提案します。
または、エクスプローラーツールウィンドウ Alt+1 で、参照する JavaScript、CSS、イメージファイルを選択し、HTML ファイルにドラッグします。JetBrains Rider は、<head> 内に <script>、<link>、または <img> タグを生成します。<img> タグの場合、JetBrains Rider は width 属性と height 属性も生成します。
コードフラグメントをタグでラップする
ラップするコードフラグメントを選択して Ctrl+Alt+T を押すか、メインメニューからを選択します。
リストからタグで囲むを選択します。JetBrains Rider は、選択を括弧のペア（
<>および</>）で囲みます。左括弧
<>の内側にタグを入力します。JetBrains Rider は、終了括弧</>のタグを自動的に埋めます。
ドキュメントの検索
ほとんどの HTML タグと属性について、JetBrains Rider は対応する MDN 記事の要約を表示できます。この要約は、ドキュメントポップ上へに表示されます。これには、タグまたは属性の非推奨ステータス、およびさまざまなブラウザーとの互換性に関する情報も表示されます。
タグまたは属性がすべてのバージョンのブラウザーで使用可能な場合、JetBrains Rider はその互換性に関する情報を表示しません。
それ以外の場合、ドキュメントポップ上へにはタグまたは属性をサポートするブラウザーとそのバージョンも一覧表示されます。
タグまたは属性が廃止予定の場合、ポップ上へはこのステータスについても通知します。
タグまたは属性のドキュメントを表示する
タグまたは属性にキャレットを置き、Ctrl+Q を押すか、メインメニューからを選択します。
タグまたは属性の上にマウスを移動すると、JetBrains Rider はすぐにその参照をドキュメントポップ上へに表示します。
この動作をオフにすることも、ポップ上への表示を速くまたは遅くするように設定することもできます。以下のドキュメントポップ上への動作の構成を参照してください。
ドキュメントポップ上への動作を構成する
コードシンボルの上にマウスを移動したときにドキュメントの自動的な表示をオフにするには、ポップ上へで
をクリックし、マウス移動時に表示するオプションを無効にします。ドキュメントポップ上へを速くまたは遅く表示するには、設定 / 環境設定ダイアログ（Ctrl+Alt+S）を開き、に移動してから、ドキュメントのポップ上へを表示するチェックボックスを選択して遅延時間を指定します。
ブラウザーでタグと属性の MDN ドキュメントを開く
ドキュメントポップ上へ Ctrl+Q で、下部のリンクをクリックします。
Shift+F1 を押すか、メインメニューからを選択します。
HTML ファイルのプレビュー出力
HTML コードの出力は、組み込みの JetBrains Rider プレビューで開くことも、外部の任意のブラウザーで開くこともできます。
デフォルトでは、ブラウザーまたは組み込みプレビューで HTML ファイルを開いた後、この HTML ファイル (またはリンクされた JavaScript またはスタイルシートファイル) が手動または自動で保存されるたびに、JetBrains Rider はページを自動的に再読み込みします。「保存して保存する」を参照してください。変更を元に戻します。
入力時にページを再読み込みするようにデフォルトの動作を変更して、HTML または関連ファイルへの変更がブラウザーまたは組み込みプレビューにすぐに表示されるようにすることができます。以下の自動再ロードを構成するを参照してください。
JetBrains Rider 組み込みプレビュー
JetBrains Rider の組み込みプレビューにより、ブラウザーに切り替えてページをリフレッシュする必要がなくなるため、作業が高速化されます。プレビューは別のエディタータブで開かれ、再読み込みの動作に応じて、入力時または変更の保存時に自動的に再読み込みされます。
JetBrains Rider 組み込みプレビューを開く
メインメニューで、に移動し、リストから
を選択します。または、コードの上にマウスを移動してブラウザーアイコンのポップ上へを表示し、
をクリックします。
ブラウザーで HTML ファイルをプレビューする
HTML コードが本番環境で適切にレンダリングされることを確認するには、特定のブラウザーで HTML ファイルをプレビューします。
組み込みの JetBrains Rider Web サーバーを使用している場合、再ロードの動作に応じて、変更を保存するとき、または入力すると、ページが自動的に再ロードされます。
に移動し、リストから目的のブラウザーを選択します。
デフォルトの JetBrains Rider ブラウザーを開くには、デフォルトを選択します。
または、コードの上にカーソルを置くとブラウザーアイコンのポップ上へが表示され、目的のブラウザーを示すアイコンをクリックします。
ブラウザーが 1 つしかない場合は、Alt+F2 を押してください。
ポップ上へでブラウザーアイコンを設定する
設定 / 環境設定ダイアログ（Ctrl+Alt+S）を開き、に移動します。
一部のアイコンを非表示にするには、不要なブラウザーのアクティブチェックボックスをオフにします。
ポップ上へ全体を非表示にするには、HTML ファイル用チェックボックスをオフにします。
自動再ロードを構成する
デフォルトでは、ブラウザーまたは組み込みプレビューで HTML ファイルを開いた後、この HTML ファイル (またはリンクされた JavaScript またはスタイルシートファイル) が手動または自動で保存されるたびに、JetBrains Rider はページを自動的に再読み込みします。「保存して保存する」を参照してください。変更を元に戻します。
ページの再ロードをトリガーするファイルを保存すると、JetBrains Rider は了解ツールチップを表示します。
入力時にページを再読み込みするようにデフォルトの動作を変更して、HTML または関連ファイルへの変更がブラウザーまたは組み込みプレビューにすぐに表示されるようにすることができます。
ツール | ウェブブラウザーとプレビュー設定ページ Ctrl+Alt+S に移動します。または、了解！ ツールチップで構成をクリックします。
再ロードの動作領域で、ブラウザーでページを再ロードおよび組み込みプレビューでページを再ロードリストから、Web ブラウザーおよび組み込みプレビューでページの自動再ロードをトリガーするアクションを選択します。デフォルトでは、保存時が選択されています。
対応する HTML ファイルまたはリンクされたファイルを更新するときにページを再ロードするには、変更時を選択します。
自動上へロードを抑制するには、無効を選択します。
エディターで Web ページの HTML ソースコードを表示する
Ctrl+Shift+A を押し、リストから URL からソースコードを開く ... を選択します。
表示される URL を開くダイアログで、Web ページの URL アドレスを入力するか、リストから以前に開いた URL を選択します。
埋め込まれたイメージを表示する
JetBrains Rider は、HTML ファイルに埋め込まれたイメージを表示するいくつかの方法を提供します。ソースへのナビゲーションを使用するか、外部のグラフィカルエディターでイメージを開くか、オンザフライでイメージをプレビューするを使用できます。
JetBrains Rider でイメージを表示する
エクスプローラーツールウィンドウで、イメージファイルを見つけて選択します。
あるいは、エディター内のイメージへの参照にキャレットを置き、Ctrl+B を押します。
別のタブではなくポップ上へでイメージをプレビューするには、そのイメージへの参照を選択して Ctrl+Shift+I を押します。
外部エディターでイメージを表示する
エクスプローラーツールウィンドウで、イメージファイルを右クリックし、を選択します。
または、Ctrl+Alt+F4 を押します。
JetBrains Rider は、OS でデフォルトで使用されているエディターでイメージを開きます。IDE がファイルを開く別のイメージエディターを設定できます。
デフォルトの外部エディターを変更する
エディターでイメージを右クリックし、コンテキストメニューから外部エディターへのパスを編集…を選択します。
Ctrl+Shift+A を押して
Edit Path to External Editorと入力することもできます。外部エディターへのパスダイアログで、イメージを開くアプリケーションへのパスを指定し、保存をクリックします。
インクルードファイルの抽出
HTML コードの断片を別のインクルードファイルに抽出できます。<script> タグ内の JavaScript コードブロック全体も同様に抽出できます。JetBrains Rider はまた、選択されたフラグメントの複製の代わりに参照を追加することを提案します。
エディターで、抽出するコードブロックを選択し、メインメニューまたは選択したコンテキストメニューからを選択します。
表示されるインクルードファイルの抽出ダイアログで、拡張子を付けずにインクルードファイルの名前とそれを格納するディレクトリを指定します。事前定義されたディレクトリをそのまま使用するか、別のディレクトリを選択することができます。
準備ができたら OK をクリックします。JetBrains Rider は、選択したソースコードをターゲットディレクトリ内の指定されたファイルに抽出し、ソースファイルに対応するリファレンスを生成します。
構文ハイライトを構成する
好みや習慣に応じて HTML 対応の構文ハイライトを設定できます。
設定 / 環境設定ダイアログ（Ctrl+Alt+S）で、 に移動します。
配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、配色: IDE テキストのフォントと色の説明に従ってカスタマイズします。
カスタム HTML タグを構成する
JetBrains Rider は、すべての標準 HTML タグを認識し、マーク上へ内のすべての不明なタグを報告します。カスタム HTML タグに依存するフレームワークを使用している場合、そのようなタグも不明として報告されます。その場合、誤検知になります。
単一の HTML タグを既知のカスタムタグのリストに追加するには、ハイライトされたタグにキャレットを置き、Alt+Enter を押してカスタム HTML タグに [ タグ ] を追加を選択します。
複数のカスタム HTML タグを構成するには、設定 / 環境設定ダイアログ (Ctrl+Alt+S) のページに移動し、インスペクションを見つけて、右側のインスペクションオプションでカスタム HTML タグのリストを構成します。
HTML でのクラウド補完と行全体補完
JetBrains Rider は HTML コードでクラウドの完成と Full Line 補完を提供します。
行全体コード補完機能は、ローカルで実行されるディープラーニングモデルを用いて、コード行全体を提案します。JetBrains Rider ではすぐに利用可能で、追加のライセンスは必要ありません。
HTML で行全体コード補完を有効にする
Ctrl+Alt+S を押して設定を開き、エディター | 一般 | インライン補完を選択します。
Full Line の候補を有効にするチェックボックスを選択し、HTML チェックボックスが選択されていることを確認します。
AI Assistant を搭載したクラウド補完では、プロジェクトのコンテキストに基づいて、単一の行、コードブロック、さらには関数全体をリアルタイムで自動補完できます。
Cloud Completion は、コンテキストを考慮して構文的に許容可能なソリューションを提案し、さまざまなコードインスペクションを事前に実行して、エラーの原因となるバリエーションを拒否します。
HTML でクラウド補完を有効にする
Ctrl+Alt+S を押して設定を開き、エディター | 一般 | インライン補完を選択します。
クラウド補完候補を有効にするチェックボックスを選択し、HTML チェックボックスが選択されていることを確認します。
関連ページ：
HTML、CSS、JavaScript でのライブ編集
ライブ編集機能を使用すると、HTML、CSS、JavaScript コードに加えた変更は、ページを再ロードせずにブラウザーにすぐに表示されます。ライブ編集は、HTML、CSS、JavaScript を含む、または生成する他のファイルタイプに対して機能します。Node.js アプリケーションのデバッグのときにライブ編集を使用することもできます。詳細については、「Node.js アプリケーションでのライブ編集」を参照してください。デフォルトでは、ライブ編集は HTML および CSS ファイルに対し...
Web 固有のファイルテンプレート
ファイルテンプレートは、プロジェクトツリーのコンテキストメニューのメニューまたは新規セクションを使用して作成する新しいファイルの既定の内容の仕様です。作成するファイルの種類に応じて、テンプレートは、その種類のすべてのファイルに期待される初期コードとフォーマットを提供します (業界または言語の標準、企業ポリシー、その他の理由に従って)。JetBrains Rider は、新しいファイルを作成するときに提案される、サポートされているすべてのファイルタイプの定義済みテンプレートを提供します。ファイルテ...
配色: IDE テキストのフォントと色
開発者は、エディターのソースコード、検索結果、デバッガー情報、コンソールの入出力など、多くのテキストリソースを操作します。このテキストのフォーマットには色とフォントスタイルが使用されており、一目で理解できるようになります。JetBrains Rider では、IDE テキストで使用される色とフォントを定義する構成可能な配色から選択できます。事前定義された配色を使用するか、あなたの好みに合わせてカスタマイズすることができます。スキームを共有することも可能です。配色を選択を押して設定を開き、を選択し...
コード補完
AI Assistant を搭載したクラウド補完機能は、プロジェクトのコンテキストに基づいて、単一の行、コードブロック、さらには関数全体をリアルタイムで自動補完できます。生成されたコードは、ユーザーのスタイルや命名規則に合わせて、ユーザーがコードを記述する方法に似ています。この機能のために、AI Assistant は、コード補完用に最適化された JetBrains 開発の AI モデルである Mellum を活用します。エディターでクラウド補完を使用する：入力すると、エディターに候補が表示されま...
行全体コード補完
行全体コード補完機能は、ローカルで実行されるディープラーニングモデルを用いて、コード行全体を提案します。JetBrains Rider ではすぐに利用可能で、追加のライセンスは必要ありません。C# コードを入力すると、エディターに候補が表示されます。提案全体を受け入れるには、を押します。または、メインメニューのに移動するか、別のショートカットを構成します。提案を単語ごとに受け入れるには、を押すか、メインメニューでに移動します。提案を 1 行ずつ受け入れるには、を押すか、メインメニューでに移...
JetBrains IDE に AI Assistant をインストールする
AI Assistant プラグインはバンドルされておらず、デフォルトでは [1] では JetBrains IDE で有効になっていません。プラグインをインストールし、JetBrains AI サービスライセンスを取得し、プラグインのインストール時に JetBrains AI 利用規約と JetBrains AI 利用規定に明示的な同意を与えない限り、AI Assistant はアクティブにならず、コードにアクセスできません。システム要件：AI Assistant はデフォルトでクラウドホスト型の LL...