JetBrains Rider 2024.3 ヘルプ

言語およびフレームワーク: スタイルシート

JetBrains Rider を使用すると、Sass(英語)、Less(英語)、SCSS(英語)、Stylus(英語) など、CSS(英語) およびそれにコンパイルされるさまざまな言語でスタイル定義を記述できます。

スタイルシートのドキュメントの検索、ルールセットの作成と移動、変数の導入などもできます。

始める前に

設定で CSS プラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに CSS と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。

コード補完

JetBrains Rider は、プロパティ、その値、セレクタ、変数、ミックスインにコード補完を提供します。

Style Sheets: basic code completion

完全なスタイルシートクラス

CSS、SCSS、Less、Sass のクラスと ID の補完は、HTML ファイル、さまざまな種類のテンプレート（Angular、Vue.js など）、JSX コードで利用できます。

HTML ファイルでは、JetBrains Rider は最初に style タグと link タグにリンクされたファイルからクラスと ID を提案します。一致する結果が見つからない場合、JetBrains Rider はプロジェクト内のすべてのスタイルシートファイルで定義されているシンボルも提案します。プロジェクトで定義されているすべてのクラスと ID をすぐに確認するには、入力を始める前に Ctrl+Space を 2 回押します。

Project-wide completion for Style Sheet symbols in HTML

外部ライブラリの完全なスタイルシートクラス

JetBrains Rider を使用すると、プロジェクトの依存関係にこれらのライブラリを追加せずに、Twitter Bootstrap(英語) または HTML ファイルの CDN からリンクされている他の CSS ライブラリからクラス名の補完を取得することもできます。

Enabling completion for an external CSS library

  1. 外部 CSS ライブラリへの CDN リンクを含む HTML ファイルを開きます。JetBrains Rider はリンクをハイライトします。

  2. ライブラリの補完を有効にするには、リンク上で Alt+Enter を押し、リストからライブラリのダウンロードを選択します。または、リンクの上にマウスを置き、ライブラリのダウンロードをクリックします。

ライブラリは、設定 | 言語およびフレームワーク | JavaScript | ライブラリページの JavaScript ライブラリのリストに追加されます。詳細については、「CDN リンクを介して追加されたライブラリの構成」を参照してください。

Sass および SCSS セレクター一式

JetBrains Rider は、ネストされたセレクター(英語)とアンパサンドで作成されたセレクター (&)(英語) を含む Sass および SCSS セレクターの補完も提供します。

Completion for Sass and SCSS selectors

スタイルシートにおけるクラウド補完と行全体補完

JetBrains Rider は、CSS、Less、Sass/SCSS、PostCSS コードでクラウドの完成および Full Line 補完を提供します。

行全体コード補完機能は、ローカルで実行されるディープラーニングモデルを使用して、コードの行全体を提案します。

スタイルシートで行全体コード補完を有効にする

  1. Ctrl+Alt+S を押して設定を開き、エディター | 一般 | インライン補完を選択します。

  2. Full Line の候補を有効にするチェックボックスを選択し、CSS のようなチェックボックスが選択されていることを確認します。

    Enable Full Line completion

AI Assistant を搭載したクラウド補完では、プロジェクトのコンテキストに基づいて、単一の行、コードブロック、さらには関数全体をリアルタイムで自動補完できます。

Cloud Completion は、コンテキストを考慮して構文的に許容可能なソリューションを提案し、さまざまなコードインスペクションを事前に実行して、エラーの原因となるバリエーションを拒否します。

クラウド補完を有効にする

  1. AI Assistant プラグインをインストールして有効にします。

  2. Ctrl+Alt+S を押して設定を開き、エディター | 一般 | インライン補完を選択します。

  3. クラウド補完候補を有効にするチェックボックスを選択し、HTML チェックボックスが選択されていることを確認します。

    Enable Cloud Completion in CSS

検索とナビゲーション

Navigation for SCSS selectors

  • スタイルシートシンボルの使用箇所を見つけるには、キャレットをその位置に置き、Alt+F7 を押します。プロジェクトの使用箇所を検索するから詳細を参照してください。

  • スタイルシートシンボルの使用箇所からその定義に移動するには、Ctrl+B を押します。定義へのナビゲーションは、変数やミックスインだけでなく、クラス、ID、セレクター (ネストされたセレクターやアンパサンド & を含むセレクターを含む) に対しても利用できます。

    宣言に移動の詳細を参照してください。

ドキュメントの検索

プロパティと擬似要素については、JetBrains Rider は対応する MDN 記事からの要約を表示できます。この要約はドキュメントポップアップに表示され、プロパティとその値の簡単な説明、さまざまなブラウザーとの互換性に関する情報が表示されます。

Style sheets quick documentation: compatible browsers are listed

このプロパティがすべてのバージョンのブラウザーで使用可能な場合、JetBrains Rider はその互換性に関する情報を表示しません。

それ以外の場合、ドキュメントポップアップには、このプロパティをサポートするブラウザーとそのバージョンも一覧表示されます。

セレクターの場合、JetBrains Rider もその特異性(英語)を示します。

Documentation look-up: specificity fpr selectors

プロパティのドキュメントを表示

  • プロパティにキャレットを置き、Ctrl+Q を押すか、メインメニューから表示 | クイックドキュメントルックアップを選択します。

  • プロパティの上にマウスを移動すると、JetBrains Rider はすぐにその参照をドキュメントポップアップに表示します。

    この動作をオフにすることも、ポップアップの表示を速くまたは遅くするように設定することもできます。以下のドキュメントポップアップの動作の構成を参照してください。

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

  • コードシンボルの上にマウスを移動したときにドキュメントの自動的な表示をオフにするには、ポップアップで the Show Options Menu icon をクリックし、マウス移動時に表示するオプションを無効にします。

  • ドキュメントポップアップを速くまたは遅く表示するには、設定 / 環境設定ダイアログ（Ctrl+Alt+S）を開き、エディター | 一般 | コード補完に移動してから、ドキュメントのポップアップを表示するチェックボックスを選択して遅延時間を指定します。

ブラウザーで MDN ドキュメントを開く

  • ドキュメントポップアップ Ctrl+Q で、下部のリンクをクリックします。

  • Shift+F1 を押すか、メインメニューから表示 | 外部ドキュメントを選択します。

リファクタリング

JetBrains Rider では、スタイルシートの式を変数に変換し、.css ファイルの var(--var-name) 構文、.scss および .sass ファイルの $ 構文を使用してこれらの変数を導入できます。

Style sheets: introducing a variable

変数の導入

  1. エディターで、変数に変換する式にキャレットを置き、Ctrl+Alt+V を押すか、コンテキストメニューまたはメインメニューからリファクタリング | 紹介する | 変数の導入を選択します。

  2. 選択した式が複数出現する場合は、複数の出現箇所が見つかりましたリストからこの出現箇所だけを置換または出現箇所をすべて置換を選択してください。

  3. .scss および .sass の場合、変数のグローバルスコープまたはローカルスコープを選択します。

  4. 赤い枠の付いたフィールドで、提案された変数名をそのまま使用するか、カスタム名を指定します。準備ができたら Enter を押します。

JetBrains Rider を使用すると、CSS、SCSS、Sass、Less ファイル内の既存の宣言から新しいルールセットを作成し、リファクタリングおよびインテンションアクションを使用してルールセット全体をファイル間で移動することさえできます。

ルールセットを導入する

  1. 導入する宣言を選択します。宣言が 1 つだけ必要な場合は、宣言の中にキャレットを置くだけです。

  2. Alt+Enter を押し、リストからルールセットを導入を選択します。

JetBrains Rider は、同じセレクターを使用して新しいルールセットを作成し、それに選択された宣言を移動します。選択範囲にコメント、ネストしたセレクタなどが含まれている場合、それらも新しいルールセットに移動されます。

ルールセットを他のファイルに移動する

  1. ルールセット内の移動する任意の場所にキャレットを置き、F6 を押します。

  2. 表示されたダイアログで、ルールセットを移動するファイルを指定します。指定されたファイルが存在しない場合、JetBrains Rider はそれを作成することを提案します。

  3. デフォルトでは、JetBrains Rider はルールセットが移動されるファイルを自動的に開きます。この動作を変更するには、エディターで開くチェックボックスをオフにします。

コピー、移動、名前変更などの一般的なリファクタリングも利用できます。

Rename refactoring

ブラウザーとの互換性を確認する

ドキュメントポップアップで検索するだけでなく、その場で特定のブラウザーとの互換性についてスタイルシートのプロパティを確認できます。このインスペクションは MDN ブラウザー互換性データ(英語)に基づいており、対象のブラウザーのいずれかでプロパティがサポートされていない場合は常に警告を表示します。

Style sheet compatibility inspection popup

互換性チェックをオンにする

  1. 設定 / 環境設定ダイアログ（Ctrl+Alt+S）で、エディター | インスペクションに移動します。

  2. CSS ノードを展開してプロパティに対するブラウザーの互換性を選択します。オプションエリアで、ターゲットにするブラウザーとその最小バージョンを選択します。

CSS compatibility inspection settings

色の値を変更する

JetBrains Rider を使用すると、16 進コードを入力せずにスタイルシートの色の値を簡単に変更できます。

Editing color values in Style Sheets

色の選択

  1. 編集したいスタイルシートを開きます。

  2. color: と入力し、Ctrl+Space を押します。

  3. カスタムリストを選ぶには、候補リストまたは色の選択 ... から希望のカラー値を選択してください。

色の変更

  1. 編集するスタイルシートを開き、変更するカラープロパティを探します。

  2. ガターの色アイコンをクリックします。

    アイコンが表示されていない場合は、Alt+Enter を押してリストから色の変更を選択します。下記のガターにカラーアイコンを表示するにはを参照してください。

  3. 開いた色の選択ダイアログで、新しい色を選択し、選択をクリックします。

色のコードをプレビュー

  • JetBrains Rider は、各 color プロパティを対応する色のガターアイコンでマークします。色アイコンの上にマウスを置くと、JetBrains Rider はカラープレビューとその 16 進コードを示すポップアップを表示します。

    人間が判読可能な色名の代わりにコードを使用するには、Alt+Enter を押してリストからカラーを <カラーコードシステムに変換> を選択します。ここで、<カラーコードシステム> は HEX(英語)、HSL(英語)、HWB(英語)、RGB(英語) です

ガターにカラーアイコンを表示する

デフォルトでは、JetBrains Rider はガターにカラーアイコンを表示します。それらが隠されている場合は、いつでも返却できます。

  1. 設定 / 環境設定ダイアログ（Ctrl+Alt+S）で、エディター | 一般 | ガターアイコンに移動します。ガターアイコンページが開きます。

  2. 共通領域で、色プレビューチェックボックスを選択します。

タグに適用されたスタイルを表示する

HTML および XHTML ファイルでは、JetBrains Rider は任意のタグに適用されたすべてのスタイルを表示できます。

Viewing the styles applied to the tag<body>

  • タグのコンテキストメニューからタグに適用されるスタイルを表示を選択します。

    JetBrains Rider は 2 つのペインで CSS スタイルツールウィンドウを開きます。左側のペインはタグのスタイルを示し、右側のペインはそれらの定義を示します。タグごとに、JetBrains Rider は別々のタブを開きます。

    ツールウィンドウから、ソースコード内のタグとプロパティの定義に移動できます。

    • タグに移動するには、左側のペインのツールバーの the Navigate to Tag toolbar button をクリックします。

    • プロパティの定義に移動するには、左側のペインでそれを選択し、右側のペインのツールバーの the Navigate to Style Sources button をクリックします。

構文ハイライトの構成

好みや習慣に応じて CSS 対応の構文ハイライトを設定できます。

  1. 設定 / 環境設定ダイアログ（Ctrl+Alt+S）で、エディター | カラースキームの切り替え | CSS に移動します。

  2. 配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、配色: IDE テキストのフォントと色の説明に従ってカスタマイズします。

言語およびフレームワーク: Terraform CSS の最小化

関連ページ：

プラグインのインストール

プラグインは JetBrains Rider のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrai...

JavaScript ライブラリを構成する

言語と IDE のコンテキストでは、ライブラリはファイルまたはファイルのセットです。これらのファイルの関数とメソッドは、編集したプロジェクトコードから JetBrains Rider が取得する関数とメソッドに加えて、JetBrains Rider の内部知識に追加されます。プロジェクトのスコープでは、そのライブラリはデフォルトで書き込み保護されています。JetBrains Rider は、2 つの事前定義された自動生成ライブラリフォルダーを予約します。node_modules プロジェクト pac...

エディターで AI を使用する

プロンプトを使用してエディターでコードを生成する：コードを生成し、エディターでプロンプトを直接使用します。プロンプトを使用してエディターでコードを生成する変更したいコードの一部を選択するか、エディター内の任意の場所にキャレットを置いて、を押します。または、エディター内の任意の場所を右クリックしてコンテキストメニューを開き、AI アクションを選択してからコードの生成を選択します。入力フィールドにプロンプトを入力し、を押します。生成が完了するまで待ちます。生成されたコードは、入力フィールドを呼

行全体コード補完

行全体コード補完機能は、ローカルで実行されるディープラーニングモデルを使用して、コードの行全体を提案します。C# コードを入力すると、エディターに候補が表示されます。提案全体を受け入れるには、を押します。または、メインメニューのに移動するか、別のショートカットを構成します。提案を単語ごとに受け入れるには、を押すか、メインメニューでに移動します。提案を 1 行ずつ受け入れるには、を押すか、メインメニューでに移動します。IDE はすべての提案をフォーマットし、必要な括弧と引用符を追加します。サ...

AI Assistant

AI Assistant は、ソフトウェア開発に AI を活用した機能を提供します。コードの説明、コードの断片に関する質問への回答、コードの提案の提供、メッセージのコミットなどを行うことができます。AI Assistant プラグインはバンドルされておらず、JetBrains Rider ではデフォルトで有効になっていません。プラグインをインストールし、JetBrains AI サービスライセンスを取得し、プラグインのインストール時に JetBrains AI 利用規約と JetBrains AI...

ソリューション内のテキストを検索して置換する

ソリューション全体、プロジェクト、ネストされた階層を持つ任意のディレクトリ、任意のスコープ内のテキストを検索して置き換えることができます。プレビュータブまたは検索ウィンドウで検索結果を確認します。ソリューション内のテキストを検索ソリューションの特定の部分のみを検索する場合は、エクスプローラーツールウィンドウで対応するノードを選択します。を押すか、を選択します。複数ファイル内検索ダイアログで、検索文字列を入力します。必要に応じて、検索オプションを指定します。をクリックするかを押して、最近の検索